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Introducción 


Este libro se titula “Sumérjase en la Accesibilidad: A 30 días de un sitio de Internet más 
accesible”, y responderá dos preguntas. La primera pregunta es “Por qué debo hacer mi 
sitio de Internet más accesible?” Si usted no tiene un sitio de Internet, este libro no es para 
usted. La segunda pregunta es “Como puedo hacer mi sitio de Internet más accesible?” Si 
no le convence la primera respuesta, no le interesará la segunda. 


Para responder la primera pregunta, les presentaré bosquejos caracterizados de 5 personas: 
Jackie, Michael, Bill, Lillian y Marcus. Estas personas tienen muchas cosas en común: 





1. Todos tienen una combinación de discapacidades físicas, mentales, y tecnológicas 
que les hacen más difícil usar la Internet. 

2. Aunque ficticios, todos representan personas reales con discapacidades, y usan la 
Internet de la misma forma en que las personas reales con discapacidades usan la 
Internet. 

3. Todos tienen dificultades tratando de leer a tu sitio web. 


Para responder a la segunda pregunta, les presentaré 25 consejos que puede aplicar 
inmediatamente en su propio sitio web para hacerlo más accesible. Aunque estos conceptos 
aplican para todos los sitios web, me centraré básicamente en la implementación usando 
herramientas populares de registros de apuntes de Internet (weblogs). Si usted desea usar 
alguna otra herramienta de publicación o sistema de plantillas (templates), necesitará 
determinar como implementar estos consejos en la herramienta de su preferencia. 


Cada sugerencia se centrará en un simple concepto, explicando el razonamiento lógico 
detrás de este, y mostrará quien se beneficiará cuando lo implemente. Es por esto que los 
bosquejos caracterizados se muestran al principio, por que cambian el tono de la primera 
pregunta desde “Por qué debería molestarme?” a “Quién se beneficia?” Respuesta: “Marcus 
se beneficia.” “Cómo se beneficia Marcus?” “Bueno, veamos como...” Y así en adelante. 


No entre en pánico si no es un experto en HTML. Tampoco entre en pánico si el único sitio 
web que tiene es un registro de apuntes de Internet (un weblog o blog), y eligió una 
plantilla de un listado en su primer día de registros, y nunca la ha vuelto a tocar. No estoy 
aquí para decirle que necesitará rediseñar radicalmente su sitio web desde el principio, 
destruir todas sus tablas enlazadas, convertir todo a XHTML o CSS. Esto es para que tome 
lo que ya tiene y lo mejore en de una forma pequeña pero importante. Jackie, Michael, Bill, 
Lillian, y Marcus le agradecerán su atención. 
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Día 1: Jackie 


Jaquelin, conocida como Jackie, vive con su madre enPark Ridge Illinois, en las afueras de 
Chicago. Tiene 19 años, está en su último año del bachiller, y es una estudiante excelente. 
La razón de esto es en parte por que tiene tutores privados que la ayudan, pero en gran parte 
se debe a que estudia diligentemente y lee vorazmente. Tiene todos sus libros de texto en 
cassettes, y los escucha en un toca-cassetes especial que puede reproducir inteligiblemente 
los cassetes a una velocidad equivalente a tres veces la normal con una distorsión mínima. 
Ha estado ciega desde hace 8 años. 


Debido a que no nació ciega, Jackie entiende conceptosvisuales como los colores, y todavía 
habla sobre los colores con su madre en términos de cosas que estaban en su vida “previa”. 
De lo único que no habla es del accidente que mató a su padre y la dejó ciega; solo es 
mencionado indirectamente por preposiciones: “antes” y “después”. “Esto es verde como 
las paredes de la sala antes.” “Es como ese suéter rosado que te ponías antes, solo que un 
poco mas claro.” Y así sucesivamente. 


Jackie tiene dos años de retraso con respecto a sus compañeros de clase en la escuela, 
debido a su dificultad para ajustarse a la vida inmediatamente después del accidente. Este 
otoño, asistirá a la Universidad de Chicago y se especializará en literatura comparativa. 
Está entusiasmada por ir a la universidad, en parte porque espera hacer nuevos amigos, y 
por otro lado porque será capaz de hacer una mayor parte de sus trabajos para clases en la 
Internet: leer las programaciones de las clases, entregar las tareas, y enviar mensajes 
instantáneos a sus profesores y compañeros de clases. Tiene pocos amigos en su escuela 
secundaria; se pasa la mayor parte de su tiempo con su madre, y el resto conectada a 
Internet. 


Ella gasta alrededor de $300 mensuales en libros auditivos, música, y el listado común de 
aparatos para jóvenes intelectuales. La mayor parte de sus libros de audio están todavía en 
cassettes, aunque está encontrando más y más material de lectura interesante que puede 
descargar a su lector de libros electrónicos para escucharlos. Música en CD, y aparatos, 
aparatos, aparatos, todo de compras por la Internet. 


No es por el hecho de que comprar por la Internet es fácil, pero esta a años luz tomar el tren 
al centro comercial local y tratar de llamar la atención de un vendedor. Además, comprar 
en Internet es algo que puede hacer sin su perro guía, Arturo. A ella no le gusta Arturo, 
porque no es tan bueno como sus perros guías anteriores, Lancelot y Guinevere, los cuales 
ya están retirados y viven con ella y su madre. Ella los distingue por sus collares; Arturo 
tiene un collar liso, el de Lancelot es con puntas y el de Guinevere con ranuras. 


Como la mayor parte de las personas ciegas, Jackie sabe muy poco Braille. Ella tiene un 
marcador de etiquetas Braille para sus CDS, pero no puede leer libros en Braille, porque 
estos están escritos en Braille grado 2, el cual ella no ha aprendido. Cuando ella compra y 
juega en Internet, usa la última versión de JAWS, un lector de pantalla que se integra al 
navegador Internet Explorer para Windows. El JAWS utiliza un avanzado sintetizador de 
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texto-a-vOZz para leer los sitios de Internet. También posee un listado impresionante de 
accesos directos desde el teclado para navegar a través de los sitios de Internet, cada uno de 
los cuales Jackie ha memorizado. Ella puede leer sitos de Internet bien diseñados más 
rápido de lo que puede leer sus libros auditivos. 
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Día 2: Michael 


Michael tiene 27 años, está retirado, y vive con su novia Christine en el vecindario Great 
Neck, de Long Island. Cuando tenía 22 años, empezó una pequeña compañía especializada 
en armar cables de fibra óptica de alta velocidad. Dos años después, vendió en el momento 
indicado al mismo conglomerado de telecomunicaciones mundial que, en este preciso 
instante, está al teléfono explicándole porque no puedo obtener nada mas que acceso a 
Internet por marcado (dial-up) de 56K en su nuevo apartamento de $4000 mensuales. El 
dinero, parece ser, puede comprar todo excepto competencia. 


Michael ve el mundo diferente a como usted lo ve. Esta no es una frase estereotipada o una 
declaración filosófica, en realidad él ve el mundo de manera diferente a como lo ve usted. 
El tiene daltonismo, una incapacidad para distinguir el rojo del verde (los rojos, en 
particular, aparecen muy oscuros, casi negros). Todas sus ropas están discretamente 
etiquetadas con letras, R para el rojo, VO para verde oscuro, y así sucesivamente. Su novia 
ha compilado una matriz de compatibilidad que específica cuales ropas puede ponerse 
juntas. El sigue estas instrucciones al pie de la letra, por así decirlo, aunque no entiende 
porque esto importa. 


Mientras el representante de servicio al cliente le está diciendo a Michael, de manera 
agradable, que está fastidiado para siempre, Michael está haciendo sus rondas usuales por 
la Internet. Ahora que está retirado, se pasa la mayor parte del tiempo coleccionando 
antiguos tableros de juegos de arcada, arreglándolos, poniéndolos en gabinetes, 
detallándolos, y re-vendiéndolos en sitios de subastas por Internet. En realidad, su novia 
hace la mayor parte del detallado, pero Michael hace todo el resto. También posee un hurón 
llamado Ralph, que, a pesar de su nombre, es hembra. Christine se quejó de que los hurones 
machos huelen demasiado, así que acordaron hacerlo como ella quería. Ralph se pasa la 
mayor parte del tiempo durmiendo en la parte superior izquierda del sofá, pero sale a 
sentarse en el alfeizar a la hora pico matutina para mirar el tráfico. De hecho, Michael 
también. Christine no, ella se queda durmiendo. Es un momento entre un hombre y su 
hurón. 


Como es de esperarse, el hobby de Michael requiere de mucho tiempo de interacción en la 
Internet con clientes pasados y futuros, suplidores, dueños de arcadas, y cualquier otra 
persona que pueda tener una pista para adquirir una pieza de estas maquinas de arcadas 
poco conocidas. Maldice su acceso a Internet por marcado de 56K, que es en realidad de 
28K, y abre su navegador. Algunos días usa solamente su navegador de texto Links, que 
despliega complejos formatos con múltiples columnas tan bien como un navegador gráfico, 
pero solo en texto —sin imágenes ni fuentes. Otros días usa Opera, porque le permite cargar 
páginas en el fondo, y para encender o apagar las imágenes de manera sencilla. 
Mayormente las deja apagadas, para conservar ancho de banda. Hoy es un día para usar 
Links. 


Las luces de los semáforos son rojas-amarillas-verdes de arriba a abajo. Los semáforos 
posicionados de manera horizontal son difíciles, y por lo tanto peligrosos. Michael, como el 
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8% de los hombres americanos que son daltonianos, ha aprendido a escanear rápidamente 
el área alrededor y seguir el poste del suelo a las luces. La luz más alejada del poste desde 
el suelo es roja, la más cercana al suelo es verde. El amarillo siempre está en el medio. 
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Día 3: Bill 


Bill vive en un pequeño departamento en San Francisco, a 5 millas de su hermana, su único 
pariente vivo. Tiene 62 años. El departamento está siempre impecable, como un cuartel 
militar justo antes de la inspección. Esto es natural, ya que Bill ha estado en la milicia 
desde que tenía 18. Comenzó como soldado, ascendió los rangos, fue condecorado tres 
veces en Vietnam, y se mantuvo activo hasta que una lesión en la rodilla lo forzó a un 
trabajo de escritorio hace 10 años. Luego, el año pasado, sufrió un derrame cerebral y 
finalmente se vio forzado a retirarse. Su brazo derecho no se mueve en absoluto, y su mano 
izquierda tiembla por razones que nadie ha podido explicar. 500 personas asistieron a su 
fiesta de retiro. A todos los conocía personalmente. 


Bill usa una vieja laptop que corre en el sistema operativo Red Hat Linux. Navega el 
Internet con Mozilla, y lee su correo electrónico con Evolution, aunque el no sabe nada de 
esto. La computadora (y sus programas) fueron un regalo de retiro de su hermana., que es 
muy buena en este asunto de las computadoras. La laptop es una de estas laptops viejas que 
está permanentemente estancada en una resolución de 1024 por 768, aunque tiene un 
monitor de 13 pulgadas. Bill puede ver muy bien, gracias, aunque sus ojos ocasionalmente 
se confunden y pierden la noción de lo que está leyendo. Esto comenzó con el derrame, y 
su hermana piensa que se está poniendo peor, pero ella está obviamente equivocada. 


Su única gran indulgencia relacionada a las computadoras fue una extensión del teclado que 
le ofrece un segundo grupo de teclas de flechas y de Avance/Retorno, para poder 
alcanzarlas más fácilmente con su mano buena. $29.99, con un cupón enviado por correo, 
que el envió. 


Antes de su retiro, Bill nunca se había conectado a Internet, pero ahora ha encontrado más y 
más rezones para mantenerse allí. Permanece cuatro horas al día leyendo sitios de Internet, 
y hablando con viejos y nuevos amigos. Motivado por sus amigos veteranos, y con ayuda 
técnica de su hermana, ha comenzado ha escribir una carta de noticias sobre los derechos de 
los veteranos. Ya posee 200 miembros. 


Bill puede escribir una cantidad sorprendente de 10 palabras por minuto (el próximo año 
serán 15) manteniendo su mano izquierda firme sobre la base del teclado, y moviendo sus 
dedos. Sin embargo, apenas puede mover el Mouse, y navega mayormente con las teclas de 
flechas, la tecla de tabulación, y con una cantidad desorientadora de accesos directos de 
teclado que su hermana le ha mostrado. Su hermana también le enseño como activar un 
programa especial para que pueda mover el cursor con sus teclas de flechas, pero esto es 
tan dolorosamente lento y plagado de errores que raramente se molesta en intentarlo. 


Aunque el no lo sabe todavía, el año próximo la carta de noticias se transformará en un 
registro de apuntes de Internet, y el año después se transformará en un comité de acción 
política, y se volverá una fuerza política importante. La política, después de todo, es 
completamente acerca de quien conoces, y Bill conoce a todo el mundo. 
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Día 4: Lillian 


Lillian es una inmigrante americana, recién salida del bote, como dicen, de Hong Kong. El 
bote era en realidad un avión, y vino hace 30 años, pero aún lo dicen así. Tiene 54 años, es 
viuda, y vive en Kansas City, con su hija, su yerno, y su nieto de 2 años. Juntos, le toman la 
mayor parte de su tiempo. Su hija y su yerno son bilingües fluidos, pero Lillian todavía 
lucha con el inglés y prefiere su lengua natal, el Cantones. Cuando no está jugando con su 
nieto, trata de mejorar su inglés leyendo el periódico. Lo extiende en la mesa de la cocina, 
enciende el bombillo de 100 watts, y lee con una lupa. 


Lillian trabaja como asistente de oficina en un conglomerado global de telecomunicaciones. 
Por pura coincidencia, este es el mismo conglomerado mundial de telecomunicaciones que 
es demasiado incompetente para ofrecer acceso a Internet de alta velocidad a ricos 
veinteañeros retirados en Long Island, aunque Lillian no sabe esto. Su departamento de IT 
(técnica de informática) ha completado recientemente una migración mundial a Windows 
XP e Internet Explorer 6, y se espera que esté más cascarrabias que lo usual por los 
próximos 9 meses. También han implementado nuevas políticas de seguridad: nada de Java, 
nada de Javascript, nada de Flash, nada de controles ActiveX, a excepción de sitios 
aprobados por el departamento de IT, de los cuales no hay ninguno. Técnicamente, esto 
significa, que todos los sitios están en la zona de Sitios Restringidos en el botón de 
Seguridad, que los sitios Restringidos tienen todo la programación escrita (scripts) 
apagados, y que necesitas acceso administrativo para añadir un sitio a la zona de Sitios de 
Confianza. 


Está de más decir que, Lillian no tiene acceso administrativo. 


Ella, sin embargo, tiene un monitor de 19 pulgadas, en contra de las agotadoras objeciones 
de Matt del departamento de IT, que le recuerda a Lillian en cada oportunidad que se le 
presenta que tuvo que subirlo tres pisos porque el ascensor estaba descompuesto ese día. Lo 
dice de manera amistosa, sin embargo. A Lillian le agrada Matt; él es el más agradable de 
todo el grupo, y hasta le estableció el tamaño del texto a “Grande” en Internet Explorer, y 
ahora el registro de apuntes de su hija es lo suficientemente grande para que pueda leerlo. 
Lo lee todos los días. Pero cuando le preguntó a Matt por qué no podía hacer que el tamaño 
del texto de CNN.com fuese más grande, Matt se lanzó a una de sus cantaletas técnicas 
llenas de palabras que ella ni siquiera entendía, se frustró muchísimo, y finalmente le dijo 
que no podía hacer nada sobre eso. 


Lillian desea poder leer más sitios web, pero si Matt no lo puede arreglar, nadie puede. 
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Día 5: Marcus 


Marcus, hijo de un adicto a las drogas, ha sido ciego desde que nació. Nació tres meses 
prematuro, estuvo en un respirador por 6 semanas, y le dieron un 10% de probabilidades de 
supervivencia. Tiene 31 años. 


Marcus trabaja en un Centro AT+T de Retransmisión, donde retransmite llamadas entre 
personas sordas y oyentes. He aquí como funciona esto: 


1. Una persona sorda o con discapacidad auditiva, llamémosla Melissa, llama al centro 
usando su TDD o su computadora. 

2. Melissa escribe el nombre y el número de la persona con la que desea comunicarse, 
llamémosle Todd. 

3. Marcus llama a Todd y le informa que tiene una llamada de Melissa por medio del 
Centro de Retransmisión. 

4. Lo que Melissa escribe, Marcus lo lee en su monitor Braille actualizable ALVA, 
que toma las palabras de Melissa y las convierte a Braille en tiempo real. 

5. Lo que Todd dice, Marcus lo escribe de vuelta para Melissa a la velocidad 
asombrosa de 110 palabras por minuto. 


Ni Melissa ni Todd saben, ni les importa, que Marcus es ciego. La única indicación es el 
sonido amortiguado de las clavijas del ALVA saltando de arriba a bajo, como el clack- 
clack de una distante máquina de escribir manual. 


No hay enlace de ningún tipo entre los ojos y el cerebro de Marcus. A pesar de esto, el se 
queja de dolores de cabeza cuando los rayos del sol entran por la ventana cercana a su 
cubículo, y cierra las persianas cada tarde. 


Marcus también usa el ALVA en casa, donde usa su navegador de texto Lynx en una 
ventana en DOS que ocupa toda la pantalla. Lee el Internet en casa prácticamente de la 
misma forma en que lee sus llamadas en el trabajo: en Braille, una línea a la vez. Odia los 
programas de lectura de pantalla, y no podría escucharlo aunque lo tuviera, ya que siempre 
tiene la radio a todo volumen desde el momento en que llega a su casa hasta el que se va a 
dormir. 


También habla por teléfono mientras escucha la radio y navega por la Internet. Habla con 
100 personas en una semana. El no tiene la menor idea de que esto es algo inusual. Si ha 
jugado el juego “seis grados de separación”, buscando vínculos entre usted y cualquier 
persona del mundo, Marcus seria uno de sus seis grados. Es una de estas personas que 
genera hablar, de la que los mercadologos creen que pueden engatusar pero nunca pueden. 
El es la razón por la que su compañía telefónica ya no ofrece planes de llamadas locales 
ilimitadas. Le encanta decirles a sus amigos acerca de los sitios que ha visto. 
Intencionalmente usa la palabra “visto” porque sabe que los hace sentir incómodos. 
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Día 6: Elegir un DOCTYPE 


Las oraciones comienzan con letra mayúscula; el HTML con un DocTYPE. Es simplemente 
gramática básica. 





Quien se beneficia? 
Usted se beneficia. Muchos de los consejos del resto de esta serie requerirán que sepa que 


versión de HTML esta usando, porque las instrucciones serán ligeramente diferentes. Así 
que apréndalo ahora, o defina uno si no lo tiene. 


Como hacerlo 


Puede que ya tenga un DOCTYPE. Vea el código fuente de su página; su DOCTYPE (si tiene 
uno) estará justo en el tope, antes de la etiqueta <html>. 








e Si usa la plantilla por defecto de Movable Type, su DOCTYPE será probablemente 
incluirá la frase "XHTML 1.0 Transitional". Esto está correcto. 

e Si está usando una de las plantillas por defecto de Radio Userland, Manila, o 
Blogger, su DOCTYPE probablemente incluirá "HTML 4.01 Transitional". Esto 
también es correcto. 

e Otros argumentos DOCTYPE válidos incluyen frases como "HTML 4.01 Strict", 
"XHTML 1.0 Strict", "XHTML 1.1", y algunas otras. Todas estas son correctas. 











Si tiene un DOCTYPE, no lo cambie. Sin embargo, si su código fuente no muestra ningún 
DOCTYPE antes de su etiqueta <htm1>, añada esta: 








<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3.org/TR/html14/1loose.dtd"> 








Por razones técnicas a las que preferiría no ir por ahora (vea la sección “Lectura añadida” 
mas abajo si esta interesado), es posible que vea ligeros cambios en la presentación de su 
página luego de añadir este DOCTYPE. Si (y solamente si) esto le pasa, puede ceder y usar la 
mitad de un DOCTYPE, como este: 














<!DOCTYPE html PUBLIC "-//W3C//DID HTML 4.01 Transitional//EN"> 











Note que cada página de su sitio de Internet debe incluir un DOCTYPE, así que debe revisar 
todas sus plantillas. 





e Los usuarios de Movable Type deben chequear las plantillas "Main Index", "Master 
Archive Index", "Category Archive", "Date-Based Archive", y "Individual Entry 
Archive", además de cualquier otra plantilla que haya creado manualmente. 

e Los usuarios de Radio Userland y Manila deben chequear tanto la plantilla "Main 
template" como la "Home page template". 
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e Los usuarios de Greymatter deben chequear las plantillas: "Main Index-Related 
Templates", "Archive-Related Templates", y "Entry-Related Templates". 

e Los usuarios de Blogger deben poner un DOCTYPE en la plantilla principal. Si su 
plantilla "Archive template" es una página por separado (esto es, si tiene una 
etiqueta <htm1> arriba), esta también debe tener un DOCTYPE. 








Lo mas importante a tener en cuenta por el resto de la serie es si se está usando HTML 4 
(cualquier variante), XHTML 1.0 (cualquier variante), O XHTML 1.1. Verá el por qué 
mañana. 


Lectura añadida 


e  AList Apart: Arreglando su Sitio de Internet con el DOCTYPE Correcto (Fixing 
Your Site With The Right DOCTYPE). 


e MSDN: Peculiaridades en IE6. (Nota: Este sitio no funciona en algunas versiones 
de Netscape y Mozilla. Esto es culpa de Microsoft, no mía.) 
e Peculiaridades en Mozilla, artículo en inglés. Quirks mode in Mozilla. 
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Día 7: Identificar su idioma 


Usted sabe cual es el lenguaje en el que escribe, así que dígaselo a sus lectores... y a sus 
programas. 


Quién se beneficia? 


l. Jackie se beneficia. Su programa de lectura de pantalla (JAWS) necesita saber en 
que idioma están escritas sus páginas, para que pueda pronunciar sus palabras 
correctamente cuando las lee. Si no identifica su idioma, JAWS intentará adivinar 
que idioma está usando, y puede adivinar incorrectamente, especialmente si pone 
código fuente entre comillas o si incluye contenido que no pertenece al idioma en 
sus páginas. 

2. Google se beneficia, aun si está escribiendo artículo artículo en inglés, pero 
especialmente si está escribiendo en otro idioma. De acuerdo con el Google 
Zeitgeist, el 50% de los usuarios de Google buscan en idiomas diferentes al ingles, y 
muchos otros de estos usuarios especifican al buscador en sus Google preferences 
(preferencias), a que solamente busque páginas en un idioma especifico. Los 
algoritmos de detección automática de idioma de Google son mejores que los de la 
mayoría, pero para qué hacerles el trabajo más difícil? 


Como hacerlo 


Primero, obtenga el código del idioma (de dos letras) correcto. El código del ingles es 
"en"; el código del francés es "fr"; el del alemán es "de". Si está escribiendo en otro 
idioma, busque su código de idioma aquí. Los códigos de idioma pueden escribirse en 
mayúsculas o minúsculas. 


Ahora coloque su código de idioma en su etiqueta <htm1>. Como hacer esto exactamente 
depende de la versión del HTML que esté usando. Revise su DOCTYPE, y luego haga uno de 
los siguientes pasos: 





1. Si está usando cualquier variante del HTML 4, cambie su etiqueta <htm1> a esto (use 
su propio idioma si no es el ingles): 


<html lang="en"> 


2. Si está usando cualquier variante del xHTML 1.0, cambie su etiqueta <htm1> a esto 
(use su código de idioma en ambos lugares): 


<html xmlns="http://www.w3.org/1999/xhtml1" lang="en" xml:lang="en"> 


3. Siestá usando XHTML 1.1, cambie su etiqueta <htm1> a esto (de nuevo, inserte su 
propio código de idioma): 
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<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 


Como el pocTYPE, debe identificar su lenguaje en cada página de su sitio de Internet. 





Una nota adicional: si tiene más de un lenguaje en una página, puede identificar el idioma 
en el elemento que encierra el texto. Por ejemplo, si su página usa HTML 4 y está 
principalmente en alemán, pero está citando un artículo artículo artículo en inglés, podría 
marcarlo de la siguiente forma: 


<html lang="de"> 





<blockquote lang="en"> 


</eloskemátes 
Lectura añadida 


e Listado de códigos de idioma. 


e El atributo lang en la especificación del HTML. 
e Jim Thatcher sobre el soporte para el atributo en los lectores de pantalla, artículo en 


inglés. El describe los algoritmos de detección automática como “débiles”, y el 
debe saber, ya que diseñó el algoritmo para Home Page Reader. Otros lectores de 
pantalla han añadido soporte para el atributo 1ang desde que sus comentarios fueron 
escritos, pero sus algoritmos de detección automática siguen siendo pobres, lo que 
hace aún más importante y útil el identificar su idioma. 
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Día 8: Construir títulos de página significativos 
Cada página de su sitio de Internet debe tener un titulo único y significativo. 


e La página inicial puede ser simplemente el nombre de su sitio de Internet. 

e Las páginas archivadas basadas en fechas deben incluir el nombre de su sitio de 
Internet, seguido de la fecha (o el rango de fechas) de la página. Por ejemplo, en mi 
registro de apuntes tengo archivos diarios cuyos títulos aparecen como "dive into 
mark/June 19, 2002", y archivos mensuales como "dive into mark/June 2002”. 

e Las páginas por categoría deben incluir el nombre de su sitio de Internet, seguido del 
nombre de la categoría. Por ejemplo, todos mis apuntes relativos a CSS son archivados 
en una página titulada "dive into mark/CSS"”. 

e Las páginas de archivo con entradas individuales deben incluir el nombre de su sitio de 
Internet, seguido del titulo de la entrada. Yo no tengo páginas separadas para entradas 
individuales, pero Jonathon Delacour las tiene, y lo hace correctamente. Por ejemplo, su 
apunte del 17 de junio del 2002, Accessibility matters, está archivado en su propia 
página con el título "Jonathon Delacour: Accessibility matters”. 








La puntuación exacta no es relevante, aunque algunos lectores de pantalla leen cada signo 
de puntuación en voz alta por defecto. Como regla general, la puntuación excesiva suena 
tan tonta como se ve. 


Quien se beneficia? 





1. Jackie se beneficia. El programa de lectura de pantalla JAWS tiene un acceso 
directo especial desde el teclado (INSERT + F10) que despliega (y lee) un listado de 
las ventanas abiertas, por el titulo de la ventana. En el caso de las páginas de 
Internet, este sería el titulo de la página. También lee el titulo mientras salta de 
ventana a ventana mediante ALT-TAB. Otros lectores de pantalla, como Home 
Page Reader, leen el titulo de la página en voz alta tan pronto acceden a la página. 

2. Marcus se beneficia. El navegador de texto Lynx muestra el titulo de la página en la 
primera línea del despliegue, así que es la primera cosa que Marcus lee en Braille. 

3. Bill se beneficia. Debido a su derrame, a veces se confunde y momentáneamente 
pierde el rastro de lo que está leyendo. El titulo de la página sirve como un anclaje 
visual; se mantiene en el mismo lugar, aun si el desliza la página. Siempre puede 
volver a echarle una mirada para refrescar la memoria. 

4. Google se beneficia. Google despliega el titulo de la página en sus resultados de 
búsquedas, y evalúa de manera más alta cuando aparecen palabras clave en el titulo 
de la página. Esto es Bueno Para Usted, especialmente para aquellas páginas con 
entradas individuales. (Elegir buenos títulos para las entradas no hace ningún daño 
tampoco). 
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Como hacerlo 


Movable Type tiene plantillas separadas para los diversos tipos de páginas de índice (index) 
y páginas de archivo. Las plantillas por defecto son bastante accesibles de por si, si está 
usando la plantilla por defecto no necesita hacer ningún cambio. 


1. Indice Principal (Main Index): <title><SMIBlogName$></title> 
Indice de Archivo (Archive Index): <title><$MTBlogName$> Archives</title> 

3. Archivo de Categoría (Category Archive): <title><$MTBl1ogName$>: 
<$MTArchiveTitle$></title> 

4, Archivo Basado en Fechas (Date-Based Archive): <title><SMIBlogNames>: 
<$MTArchiveTitleS$></title> 

5. Archivo de Entrada Individual (Individual Entry Archive): 
<title><$MTIBlogName$>: <$MTEntryTitle$></title> 

















Greymatter tiene un conjunto similar de plantillas, pero con un lenguaje para plantillas 
diferente. Greymatter no tiene una variable de plantilla separada para el nombre del registro 
de apuntes (weblog), así que inserte el titulo de su propio weblog en cada caso. 


1. Plantilla para el Indice Principal (Main Index Template): <tit1e>My 
Weblog</title> 


2. Plantilla para el Indice de Archivo Maestro (Archive Master Index Template): 
<title>My Weblog Archives</title> 

3. Plantilla para Indice de Registro de Archivo (Archive Log Index Template): 
<title>My Weblog: ((month)) ((year))</title> 

4. Plantilla de Entrada de Página (Entry Page Template): <title>My Weblog: 
[fentrysubject))</title> 








Manila (al menos en la configuración por defecto) le permite especificar un titulo para cada 
día, así que debería usar esto en lugar de la fecha, ya que seguramente será mas relevante 
con respecto al contenido. 


1. Plantilla de Página de Inicio (Home Page Template): 
<title>(siteName)</title> 


2. Plantilla (Template): <title>fsiteName): (ftitle)</title> 


Radio es un poco más difícil, pero aun así se puede añadir la fecha a sus archivos basados 
en fechas usando el lenguaje macro de Radio. Hay que ser cuidadoso al copiar y pegar este 
macro; no deben quedar espacios entre líneas en ningún sitio, y el programa lo sabe. 
(Gracias a Jake Savin por estas instrucciones). 


1. Plantilla de Página de Inicio (Home Page Template): <title><stitle%></title> 
Plantilla Principal (Main Template): <title><%stitle%><%local (d); if 
radio.weblog.file.getArchiveFileDate 


(radioResponder.fileBeingRendered, Cd) {": " + string.dateString 
(d)) else ("")%></title> 
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Desafortunadamente, no sé como cambiar los títulos de página satisfactoriamente en el 
Blogger. Sugerencias bienvenidas. 


Tenga en mente que estas son solamente sugerencias. Puede incluir la palabra “Archivos” 
en las páginas de archivos diarios o mensuales, o puede no incluirlas. La puntuación exacta 
realmente no importa, a menos que sea excesiva. Puede colocar el nombre del sitio al final 
en vez de al inicio. Es una buena idea incluir el nombre del sitio en alguna parte del título 
de la página, ya que sirve como una especie de pista contextual, especialmente cuando las 
personas están navegando con varias ventanas abiertas. 


Lectura añadida 


e Jake Savin: Añadir una fecha a sus páginas de archivo de Radio, artículo en inglés. 
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Día 9: Proveer ayudas de navegación adicionales 


A lo mejor está familiarizado con la etiqueta <1ink> en relación a hojas de estilo externas . 
Pero sabía usted que puede usar una sintaxis similar para señalar hacia su página de inicio, 
y hacia páginas previas y siguientes de una serie? Por ejemplo, en páginas diarias de 
archivo, podría señalar hacia los apuntes del día previo, y los del día siguiente (si existen). 
Si tiene páginas para cada entrada, podría señalar hacia la entrada previa y a la siguiente. 


<link rel="home" title="Home" href="http://url/of/home/page" /> 
<link rel="prev" title="Title of previous page" 
href="http://url/of/previous/page" /> 

<link rel="next" title="Title of next page" 
href="http://ur1l/of/next/page" /> 
































Estos vínculos, generalmente invisibles para los navegadores visuales como Internet 
Explorer, pueden desplegarse en navegadores alternos y ayudar a los usuarios a navegar a 
través de su sitio de Internet. Probablemente usted ya provee varias formas de navegación: 
archivos semanales o mensuales, vínculos a los registros recientes, un calendario mensual 
de de sus registros diarios. A lo mejor puede que tenga vínculos visibles en sus páginas de 
archivo señalando hacia días o entradas previas o siguientes. Todos esos son geniales; 
consérvelos, y añada también estos. 


Quien se beneficia? 


1. Marcus se beneficia. Su navegador de texto Lynx despliega las ayudas de 
navegación al principio de la página, usando el titulo que especificamos en el 
atributo title. Mientras lee la página de archivo diario del 18 de junio, esto es lo 
que Marcus ve: 


fHome June 17, 2002 June 19, 2002 





(El carácter + le deja saber a Marcus que esto es metadata, no contenido de página. 
Lynx hace lo mismo en la línea que contiene su titulo de página significativo). 





2. Michael se beneficia. Su navegador de texto Links (que no se confunda con el de 
Marcus, Lynx) también despliega estas ayudas de navegación adicionales al 
principio de la página, de esta forma: 


Link: home 
Link: prev 
Link: next 








3. Bill se beneficia. Mozilla despliega los vínculos de navegación adicionales en la 
barra de herramientas “Navegación del Sitio”. El tipo del enlace ("home”, "prev", 
"next”) se despliega en el botón de la barra, y el titulo se muestra como información 
sobre las herramientas. (Nota: la barra de herramientas “Navegación de Sitios” 


estaba en Mozilla 0.99, fue removida de la versión 1.0 a ultimo minuto, y volverá en 
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la versión 1.1. En las versiones que la soportan, puede desplegarlas bajo el menú 
Ver, Mostrar/Ocultar, Barra de Navegación de Sitios, Mostrar Siempre.) 

4. Los usuarios de ¡Cab se benefician. ¡Cab despliega los vínculos de navegación en un 
menú de despliegue vertical en la barra de herramientas, usando el titulo definido en 
cada enlace. 


Como hacerlo 


En Movable Type, añada estas líneas a su plantilla de Archivo Basado en Fechas (Date- 
Based Archive template), inmediatamente después de la etiqueta <head>: 


<link rel="home" href="<$MTBl1ogURL$>" title="Home" /> 
<MTArchivePrevious> 
<link rel="prev" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" /> 
</MIArchivePrevious> 
<MTArchiveNext> 
<link rel="next" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" /> 
</MTArchiveNext> 









































Y añada esto a su plantilla de Archivo de Entrada Individual (Individual Entry Archive 
template), de nuevo, inmediatamente después de la etiqueta <head>: 





<link rel="home" href="<$MTBl1ogURL$>" title="Home" /> 
<MTEntryPrevious> 
<link rel="prev" href="<$MTEntryLink$>" title="<$MTEntryTitles$>" /> 
</MTEntryPrevious> 
<MTEntryNext> 
<link rel="next" href="<$MTEntryLink$>" title="<$MTEntryTitles$>" /> 
</MTEntryNext> 






















































































En Greymatter, añada esto inmediatamente después de la etiqueta <head> en sus 4 
plantillas de Entrada de Página (Entry Page Templates): 


<link rel="home" title="Home" href="((pageindexlink))"> 

<link rel="prev" title="((previousentrysubject))" 
href="((entrieswebpath))/((previousentrynumberpadded)).html"> 
<link rel="next" title="((nextentrysubject))" 
href="((entrieswebpath))/((nextentrynumberpadded)).html"> 

















En Radio, el asunto se simplifica usando los Vínculos de Navegación para Radio de Sjoerd 
Visscher, un conjunto de macros para hacer justamente esto. 


1. Descargue los macros de Vínculos de Navegación (Navigation Links). 

2. Descomprima y copie los 4 archivos (navigationLinks.txt,nextDayLink.txt, 
prevDayLink.txt, permalinkUrl.txt) a su fólder Macros. En la instalación 
estándar de Windows, esto sería en C:1Archivos de ProgramalRadio 
UserLandiMacros. 

3. Inserte este código en su Plantilla Principal (Main Template), inmediatamente 
después de la etiqueta <head>: 
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<+*navigationLinks ()%> 
Desafortunadamente, no sé como implementar satisfactoriamente los vínculos de previo y 
siguiente en Manila o en Blogger, pero al menos puede añadir un enlace a su página de 
inicio, inmediatamente después de su etiqueta <head>, inserte: 
<link rel="home" title="Home" href="http://url/of/your/home/page"> 


Lectura añadida 


e Sjoerd Visscher: Navigation links in your Radio Userland weblog. 
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Día 10: Presentar inicialmente su contenido principal 


Una de las ventajas principales de usar una disposición basada completamente en CSS es 
que es fácil reordenar elementos dentro del código fuente de su HTML sin afectar la 
presentación visual, para que su contenido principal se muestre mientras el resto de su 
página carga. Sin embargo, estoy al tanto de que la mayoría de los sitios de Internet usan 
disposiciones basadas en tablas, así que este consejo es para usted. 


Si tiene una disposición basada en tablas con una barra de navegación dispuesta a la 
izquierda; su barra de navegación es presentada a usuarios ciegos como Marcus y Jackie 
antes de su contenido principal. No hay forma de describir que tan grande es este problema, 
tiene que verlo con sus propios ojos. 


1. Disposición basada en tablas de muestra. 
2. Disposición modificada, con el contenido al inicio. Estas dos disposiciones deben 


lucir esencialmente iguales en navegadores visuales, pero en Lynx, la diferencia es 
obvia. 

3. La disposición original, procesada en Lynx. 

4. La disposición modificada, procesada en Lynx. El contenido se muestra primero, y 
luego la barra de navegación. 








No necesita rediseñar la plantilla completa desde el principio para evitar este problema. 
Existe una técnica relativamente simple, llamada afectuosamente el “truco de la tabla” 
(table trick), que puede presentar su contenido principal primero, y manteniendo la barra de 
navegación del lado izquierdo. 


Quien se beneficia? 


1. Marcus se beneficia. Según se demostró en los ejemplos anteriores, Lynx despliega 
el contenido en el orden en el que aparece en el código fuente del HTML. Esto 
significa que Marcus debe pasar por encima de toda la barra de navegación cada vez 
que visita su página. Y esto es incómodo. 

2. Jackie se beneficia. JAWS, como Lynx, presenta el contenido en el orden en que 
aparece en el código fuente del HTML, no en el orden en que aparece en pantalla. 
Con JAWS, el problema es peor, porque Jackie debe esperar a que JAWS lea su 
barra de navegación completa antes de escuchar cualquier contenido real, y no hay 
ninguna forma segura en que pueda dirigirse directamente al contenido principal. 

3. Google se beneficia. Google le da más peso al contenido que esta más cercano al 
tope de la página. De hecho, la mayoría de las personas que conocen esta técnica 
están en el negocio de la optimización de los motores de búsqueda; para ellos los 
beneficios de accesibilidad son secundarios. 
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Como hacerlo 


Vea su propio sitio en el Visor Lynx (Lynx Viewer) y observe si sus apuntes diarios se 
despliegan primero, antes de la barra de navegación. La plantilla por defecto de Movable 
Type consigue hacerlo; si está usando la plantilla por defecto o algo basado en esta, 
probablemente no necesita hacer nada. Pero vea su sitio en el Visor Lynx de todos modos, 
porque esto le dará un conocimiento mas profundo de los asuntos involucrados. 


Si esta utilizando una de las plantillas por defecto de Radio, podría tener que ajustar sus 
tablas para poner su contenido principal primero. No existe una forma específica de hacer 
esto por copy-paste (copiar y pegar); tendrá que analizar más a fondo su propia plantilla y 


su estructura de tablas. La disposición de muestra y la disposición de muestra modificada 
muestran la técnica básica. 


En lugar de la obvia disposición por tablas: 


<table> 

<tr> 
<td valign="top" align="left" width="25%"> 

navigation bar 





</td> 
<td valign="top" align="left"> 
main content 
</td> 
</tr> 
</table> 














Hacemos esto: 


<table> 

<tr> 
<!-- spacer GIF in upper-left cell --> 
<td><img src="/images/1.gif" width="1" height="1" alt=""></td> 
<!-= main content cell first, with rowspan=2 --> 


<td valign="top" align="left" rowspan="2"> 
main content 
</td> 
</tr> 
<tr> 
<td valign="top" align="left" width="25$"> 
navigation bar 
</td> 
</tr> 
</table> 


Lectura añadida 


e Visor Lynx (Lynx Viewer), sitio en inglés. 
e Una Guía de Promoción: El Truco de la Tabla (The Table Trick), artículo en inglés. 
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Día 11: “Saltar? sobre los vínculos de navegación 


Si no encontraron la forma de hacer que sus plantillas presentaran su contenido principal 
inicialmente, aquí hay una salida: provea un enlace para saltar sobre sus vínculos de 
navegación. No es una solución ideal (presentar su contenido principal inicialmente es 
mejor), pero es un arreglo aceptado que muchos sitios usan. 


Este “enlace para saltar” es solamente una etiqueta <a> común y corriente, como cualquier 
otro enlace, pero usaremos CSS para esconderlo de navegadores visuales como Internet 
Explorer o Netscape. No afectará la disposición de sus páginas en absoluto; será 
completamente invisible. 


Quien se beneficia? 


1. Marcus se beneficia. Cuando el visita su página, Lynx mostrará el enlace y le 
permitirá saltar sobre su barra de navegación directamente hacia su contenido. Vea 
Día 10: Presentar inicialmente su contenido principal para encontrar un ejemplo que 
le enseñara por que esto es tan importante. 

2. Jackie se beneficia. Cuando ella visita su página, su lector de pantalla, JAWS leerá 
el enlace de salto y le permitirá saltar sobre su barra de navegación e ir directamente 
al contenido principal. 


Como hacerlo 
Primero, use el Visor de Lynx (Lynx Viewer) en su propia página para determinar si su 


barra de navegación se presenta antes que su contenido principal. Si su contenido principal 
se muestra al inicio, entonces este consejo no le aplica, disfrute su día libre. 





Ahora defina una regla de CSS para los vínculos, que los hará invisibles a los navegadores 
visuales. Si tiene una hoja de estilos externa, ponga esta regla al final de esta. (Si tiene 
múltiples hojas de estilos externas, ponga esta regla en la hoja compatible con Netscape 4). 
Si tiene una sección de <style> en la parte superior de su plantilla, añada esta regla 
inmediatamente después de la etiqueta <style>. 


.Skiplink (display: none) 


Luego, inserte el enlace de salto inmediatamente después del nombre y la descripción de su 
sitio. No puede encontrarlos? Busque las variables de plantilla apropiadas. 


Movable Type: busque <$MTBl1ogTitle$> y <$MIBlogDescription$>. 


Greymatter: no existe ninguna variable específica; busque el nombre y el tagline de su 
sitio de Internet. 


Radio: busque <%siteName%> Y <%descriptions>. 
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Manila: busque (homePageLink (siteName)]) y (tagLine). 
Blogger: busque <$BlogTitle$>. 


Los encontró? Inmediatamente después del nombre y la descripción de su sitio, inserte el 
enlace de salto: 


<a class="skiplink" href="fstartcontent">Saltar sobre la barra de 
navegación</a> 


OK, ahora necesita una etiqueta de anclaje a donde debe señalar el enlace; esta debería estar 
al principio de su contenido principal. No puede encontrar su contenido principal? No se 
asuste. Las variables de plantilla nuevamente al ataque. 


e Movable Type: busque <MTEntries>. 

+  Greymatter: en su Plantilla de Indice Principal (Main Index Template), busque 
[ tlogbody) ). En las Plantillas de Entrada de Página (Entry Page Templates), 
busque ((entrymainbody)). 

e Radio: busque <sbodytext3%>. 

e Manila: busque {bodytext}. 

e Blogger: busque <Blogger>. 





Ahora, el formato de su etiqueta de anclaje depende de que tipo de HTML este usando. 
Consulte su DOCTYPE, y luego siga uno de los siguientes pasos: 


1. Si está usando cualquier variante de HTML 4, añada esto justo antes de su contenido 
principal: 


<a name="startcontent"></a> 


2. Si está usando cualquier variante de XHTML 1.0, añada esto justo antes de su 
contenido principal: 


<a name="startcontent" id="startcontent"></a> 
3. Siestá usando XHTML 1.1, añada esto justo antes de su contenido principal: 
<a id="startcontent"></a> 


Debería incluir esta clase de enlace de salto en cada página de su sitio de Internet, así que 
añádala a todas sus plantillas. 
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Día 12: Usar colores de manera segura 


Este consejo es una regla general que aplica a diversas áreas del diseño de páginas de 
Internet, pero me centraré en un ejemplo específico que es común en los registros de 
apuntes (weblogs): el texto de los vínculos. 


Existen dos problemas potenciales relacionados con el color. Primeramente, el texto de sus 
vínculos puede no contrastar lo suficiente con el color del fondo. Cualquier color muy claro 
sobre un fondo blanco causa problemas; el texto del enlace podría básicamente desaparecer 
en el fondo. De manera similar, un color oscuro en un fondo negro también es 
problemático. Esto aplica generalmente para todo el texto, no solamente los vínculos, pero 
es muy común en los registros de apuntes (weblogs) que el texto sea legible y los vínculos 
estén puestos ilegibles involuntariamente, que es por lo que hago mención de los vínculos 
en particular. 


El segundo problema potencial es la decoración de los vínculos. Si su CSS redefine una 
regla para hacer que sus vínculos sean de un color distinto, necesita asegurarse de que los 
vínculos sean distinguibles de alguna otra forma, como en negritas, cursivas o subrayado. 
De otro modo, el texto del enlace podría quedar perfectamente legible, pero las personas 
con daltonismo no podrán distinguir que es un enlace. Esto es ilustrado a continuación. 


Quien se beneficia? 


1. Michael se beneficia. Más adelante se muestra una imagen de tres esquemas 
distintos de decoración para vínculos. 


1. Este enlace está subrayado, la acción por defecto. 
2. Este segundo enlace está en negrita y coloreado. 


3. Sin embargo este enlace solo se distingue por el color. 


Como se muestra, el enlace en la primera oración usa el esquema por defecto, y se 
despliega azul/morado y subrayado en los navegadores visuales. El segundo enlace 
tiene aplicadas dos formas de decoración de texto, y se muestra en negrita y rojo 
(pero no subrayado). El tercer enlace tiene solamente una forma de decoración de 
texto, y se muestra solamente rojo. 


Vea ahora los tres vínculos, como los ve Michael. 
1. Este enlace está subrayado, la acción por defecto. 


2. Este segundo enlace está en negrita y coloreado. 


3. Sin embargo este enlace solo se distingue por el color. 
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Como se muestra, el primer enlace aun es visible; al daltonismo de Michael no le 
afecta el color azul. En la segunda oración, el color rojo del enlace se desvanece, 
casi a negro, pero en enlace todavía aparece en negrita, así que Michael todavía 
puede distinguirlo. El problema está en el tercer enlace, el cual previamente era 
distinguido solamente por su color rojo; ahora que el rojo se ha desvanecido a 
negro, es casi imposible distinguir cuales palabras son vínculos y cuales son texto 
normal. 


Como hacerlo 


Para chequear que exista “contraste suficiente” entre su color de texto y su color de fondo, 
use VisCheck para simular como visualiza su página de Internet un lector daltónico. 


Para chequear problemas de decoración de vínculos, revise en busca de reglas de CSS que 
se refieran a las etiquetas de anclaje “a”. Por ejemplo, si tiene una regla como esta en su 
código CSS, entonces sus vínculos son solamente distinguibles por su color rojo, lo que no 


es nada bueno: 


a (1 
text-decoration: none; 
color: red; 


Puede mantener sus vínculos de color rojo, pero también necesita asegurarse de que los 
vínculos estén también en negrita, o subrayados, o en cursivas. Para ponerlos en negrita y 
mantener el color rojo, añada una línea: 


a (1 
text-decoration: none; 
color: red; 
font-weight: bold; /* añada esta línea*/ 


Lectura añadida 


e VisCheck, página en inglés. Simula el daltonismo y le permite ver lo que las 
personas daltónicas ven. Puede chequear una imagen o una página de Internet 
completa. 

e Cal Henderson: Color Vision, página en inglés. Muestra el espectro de colores 
según lo ven las personas con varios tipos de daltonismo. 

e Ishihara Test for Color Blindness, página en inglés. Contiene una serie de imágenes 
que personas con daltonismo rojo-verde ven diferente, o no pueden ver en absoluto. 
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Día 13: Usar vínculos reales 


El azote del diseño para Internet es el enlace "javascript:", un seudo-enlace que ejecuta 
una pieza de código Javascript cuando hace clic en este. El problema más común donde 
esto ocurre en los registros de apuntes (weblogs) es en el enlace usado para mostrar 
comentarios en una ventana separada. Por qué es un problema? Porque el 11% de los 
usuarios de Internet no usan Javascript por una razón u otra, incluyendo a muchos usuarios 
discapacitados cuyos navegadores no ofrecen soporte para este. Estos seudo-vínculos no 
funcionan para ellos; en su lugar, use vínculos reales. 


Aunque es fácil describir un arreglo sencillo, no puedo recalcar suficientemente lo 
importante que es este consejo. Algunos problemas, como el no poseer un “enlace de salto” 
para saltar la barra de navegación, reducen la utilidad a grados variables, pero al menos la 
página puede ser leída eventualmente. Por otro lado, este problema hace que segmentos de 
contenido importante se encuentren completamente inaccesibles. Si sus comentarios están 
escondidos detrás de un enlace "javascript :", es como si no existieran. 





Quien se beneficia? 


1. Marcus se beneficia. Lynx no ofrece soporte para Javascript. 
2. Michael se beneficia. Links no ofrece soporte para Javascript. 





3. Lillian se beneficia. Aunque ella usa Internet Explorer, su departamento de 
informática ha implementado una política corporativa para inhabilitar Javascript en 
todos los sitios, con excepción de unos pocos. Su sitio de Internet no está en el 
listado. 

4. Google se beneficia. Google quiere seguir vínculos para clasificar mas contenido, 
pero no puede seguir vínculos "javascript :", porque no ejecuta código Javascript 
mientras clasifica sitios de Internet. 


Como hacerlo 
Las plantillas por defecto de Movable Type y Radio ahora mismo hacen esto bien, así 
que puede que no necesite hacer nada. Vea el código fuente de su página de inicio y busque 


por "javascript:". Si no le encuentra, entonces este consejo no le aplica a usted. 


Sin embargo, si su plantilla de Movable Type contiene un enlace como este: 





<a href="javascript:OpenComments (<$MTEntry1D$>) ">Comentarios 
(<$MTEntryCommentCount$>)</a> 





Entonces cámbielo a esto: 





<a href="<$MICGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>" 
onclick="0penComments (<$MTEntryID$>); return false">Comentarios 
(<$MTEntryCommentCount$>)</a> 
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En navegadores en que Javascript está habilitado, funcionara de la misma forma, porque el 
atributo onc1ick toma precedencia sobre el atributo href. Así, que la nueva versión como 
quiera accede a la función OpenComment s, que aparece en una ventana nueva. Sin embargo, 
los navegadores que tienen habilitado Javascript (y Google) ignorarán el atributo onclick 
completamente y seguirán el enlace especificado en el href, el cual mostrara el contenido 
en la misma ventana. 


Si está usando seudo-vínculos javascript: pseudo-links por cualquier otra razón deje de 
hacerlo. Solamente deje de hacerlo. No se haga el desentendido. Aplique la técnica anterior 
a su propio código para que los navegadores que no tienen habilitado Javascript siempre 
tengan la oportunidad de seguir un enlace real. 


Lectura añadida 


e Jeff Howden: Vínculos $ JavaScript Viviendo Juntos en Armonía, artículo en 
inglés. 


Comentario 


Ni siquiera me hagan hablar sobre esos sistemas de menú dinámicos basados en Javascript. 
Hacen que te veas tan bien como fumar hace que te veas bien. Use vínculos reales. 
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Día 14: Añadir títulos a los vínculos 


Por el hecho de que la Internet está conformada por vínculos, cualquiera pensaría que mas 
personas conocerían el atributo title, pero raramente lo veo. Para aquellos que no lo 
saben, todos los vínculos pueden tener un titulo, especificado por medio del atributo title 
de la etiqueta <a>. Esto es un complemento a cualquier vínculo textual que especifique. El 
titulo de un vínculo generalmente se muestra como una ventana de información sobre 
herramientas en los navegadores visuales, pero puede presentarse también en navegadores 
no visuales. 


No todos los vínculos deben llevar títulos. Si el texto de un vínculo es el nombre de un 
articulo, no añada un titulo; el propio texto del enlace es lo suficientemente descriptivo. 
Pero si usted lee el texto del vínculo solo, fuera de contexto, y no puede darse cuenta de 
hacia donde señala, añada un titulo. 


Quien se beneficia? 


1. Jackie se beneficia. JAWS tiene una opción para leer el titulo de un vínculo 
conjuntamente con el texto de este (Esta opción no está activada por defecto. Para 
activarla, Jackie presiono INSERT+V para acceder a la ventana de opciones de 
verbosidad de JAWS, y luego cambió "Text links verbosity" a "Alt tag or title"). 

2. Michael se beneficia. Cuando mueve el cursor sobre un enlace en Opera, se muestra 
el titulo del vínculo es la barra de estado y como una información sobre 
herramientas. Esto le permite decidir si quiere gastar su ancho de banda siguiendo 
este vínculo. 

3. Lillian se beneficia. Cuando ella mueve el cursor sobre el vínculo en Internet 
Explorer, se muestra el titulo de un enlace como una información sobre 
herramientas. 

4, Marcus se beneficia. Cuando Marcus presiona "1", Lynx muestra un listado de 
vínculos de la página actual. El listado incluye el titulo de cada vínculo, si está 
presente. 








Como hacerlo 


En cada vínculo en el cual el texto del mismo por si solo no sea suficiente para que el lector 
decida si debe hacer clic en el vínculo, añada el atributo title. Ejemplos: 


1. En mi barra de navegación, tengo un vínculo hacia mi página de estadísticas. El 
texto del vínculo dice simplemente Statistics, pero el atributo title brinda más 
información: 


<a title="referrers and other visitor statistics" 
href="/stats/">Statistics</a> 
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2. En mi barra de navegación, tengo un vínculo a mi libro, Dive Into Python, que luce 
como sigue: 


<a title="Free Python book for experienced programmers" 
href="http://diveintopython.org/">Dive Into Python</a> 


Cuando hago un vínculo hacia un articulo usando una frase dentro de una oración, trato 
de usar el atributo title para dar información que identifique el vínculo, tal como un 
titulo de archive o una citación. Por ejemplo, el consejo de ayer incluía esta oración: 





Por qué es esto un problema? Porque <a title="Estadísticas de 
TheCounter.com sobre el uso de en los navegadores, Abril 2002" 
href="http://www.thecounter .com/stats/2002/April/javas.php">11% de 
los usuarios de Internet no usa JavaScript</a> por una razón u 


otra, incluyendo muchos usuarios discapacitados cuyos navegadores 
simplemente no ofrecen soporte para este. 





Lo que aparece así: 
Por qué es un problema? Porque el 11% de los usuarios de Internet no usan 
JavaScript por una razón u otra, incluyendo a muchos usuarios discapacitados cuyos 


navegadores no ofrecen soporte para este. 


No se extralimite con el atributo tit1e. Todo con moderación. 
Lectura añadida 


e Jakob Nielsen: Usando Títulos de Vínculos para ayudar a los Usuarios a Predecir 
hacia donde se Dirigen, artículo en inglés. 
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Día 15: Definir accesos directos desde el teclado 


Una de las características menos conocidas del HTML es el atributo accesskey para 
vínculos y formularios, que permite al diseñador de Internet definir accesos directos desde 
el teclado para vínculos usados frecuentemente o campos de formularios. En Windows, 
puede presionar ALT + una tecla de acceso; en Macintosh, puede presionar Control + una 
tecla de acceso. Si la tecla de acceso está definida en un vínculo, su navegador seguirá el 
vínculo, si es definida en un campo de formulario, su navegador se enfocará en ese campo. 
Internet Explorer ha ofrecido soporte para las teclas de acceso desde su versión 4, Netscape 
desde su versión 6. Los navegadores más antiguos simplemente las ignoran, sin ningún 
efecto dañino. 


Aunque no existen estándares para definir que teclas deben ser asignadas a que 
características, aquí hay algunos accesos directos usados comúnmente: 


Tecla de Acceso 1 

Página de Inicio 
Tecla de Acceso 2 

Salte al contenido principal (el vínculo de salto sobre la barra de navegación) 
Tecla de Acceso 9 

Contacto 


Quien se beneficia? 


1. Jackie se beneficia. Cuando JAWS lee un vínculo que define una accesskey, 
anuncia la tecla de acceso también. Por ejemplo, el vínculo <a hre£="/" 
accesskey="1">Página de Inicio</a> seria leído por JAWS como "vínculo: 
Página de Inicio, ALT + 1". Jackie puede enfocarse en el vínculo presionando 
ALT+1, y luego seguirlo presionando ENTER. 

2. Bill se beneficia. Como Bill no puede usar el Mouse de maneta efectiva desde que 
sufrió su derrame, el depende de la navegación por teclado y de los accesos directos 
de este para moverse alrededor de una página. Las teclas de acceso son una forma 
excelente para el de saltar hacia vínculos usados comúnmente. Bill puede teclear 
ALT+1, y Mozilla inmediatamente salta al vínculo que define accesskey="1" (Nota: 
Mozilla no anuncia las teclas de acceso, lo que levanta la duda de cómo descubrirá 
Bill cuales son. Discutiremos esto en un consejo próximo). 














Como hacerlo: vínculo de la página de inicio 


e Movable Type: La plantilla por defecto no tiene un vínculo a la página de inicio, 
así que debería transformar el nombre de su sitio en un vínculo, y ponerle una 
accesskey. Busque en su plantilla por <s5mMTB1o0gName$>, y cámbielo a esto: 


<a href="<$MIBlogURL$>" style="color:black; text-decoration:none" 
accesskey="1"><$MTBlogName$></a> 
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e Radio: busque en su plantilla por {siteName}. Probablemente estará en un vínculo, 
algo como esto: 


<a href="<%radio.macros.weblogUrl ()%>" style="color:black; text- 
decoration:none"><%siteName%></a> 


Simplemente añada un atributo accesskey al vínculo, como sigue: 


<a href="<Sradio.macros.weblogUrl1l ()$>" style="color:black; text- 
decoration:none" accesskey="1"><%siteName$></a> 


+ Blogger: busque en su plantilla por <$B1ogTit1e$>. Si está encerrado en una 
etiqueta <a>, añada el atributo accesskey="1" a la etiqueta <a>, según el ejemplo 
anterior. Si su <$BlogTitle$> no está encerrado en una etiqueta <a>, enciérrelo en 
una como esta (inserte la dirección de su página de inicio propia): 





<a href="http://dirección/de/su/página/inicial" style="color:black; 
text-decoration:none" accesskey="1"><S$BlogTitle$></a> 





Como hacerlo: vínculo de salto de la navegación 


Tiene un vínculo para saltar sobre la barra de navegación? Si es así, póngale un 


accesskey="2". 


<a class="skiplink" href="fstartcontent" accesskey="2">Salte sobre la 
barra de navegación</a> 


Como hacerlo: vínculo de contacto 


Tiene un formulario de contacto, o un vínculo a su dirección de correo electrónico? Si es 
así, póngale un accesskey="9". 





<a href="mailto:metmydomain.com" accesskey="9">Envíeme un e-mail</a> 


Nota: Los registros de apuntes (weblogs) de Radio generalmente tienen un vínculo hacia el 
formulario de contacto (el pequeño icono de sobre), pero el vínculo es generado por un 
macro, así que no podrá añadirle un accesskey a estos vínculos. 


Asegúrese de incluir cada accesskey en cada página de su sitio de Internet; haga estos 
cambios en todas sus plantillas relevantes. 


Lectura añadida 





e Jukka Korpela: Mejorando la accesibilidad con el accesskey en los formularios y 
vínculos de HTML, artículo en inglés. Explica porque todos mis códigos de 
accesskey sugeridos son números, en vez de letras. 
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e Paul Bohman: Teclas de acceso, IE6, artículo en inglés. Parte de una discusión 
sobre el atributo accesskey en el Listado de Correo del Foro de Accesibilidad 
(Web Accessibility Forum Mailing List). 
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Día 16: No abrir ventanas nuevas 


La única cosa que cada usuario de la Internet entiende es el botón “Atrás”. Es parte integral 
de la navegación por la Internet. Sigue un vínculo, vuelve atrás. Explora el resultado de un 
buscador, vuelve atrás. Hasta mi papá puede hacer esto, y el todavía se emociona cuando 
puede hacer doble-clic en el icono de “Internet” en un solo intento. 


En todos los navegadores dominantes, usar la etiqueta <a target="_blank"> para forzar 
que un vínculo se abra en una página diferente rompe el flujo del botón Atrás. La nueva 
ventana no retiene el historial del navegador de la ventana previa, así que el botón “Atrás” 
está deshabilitado. Esto es increíblemente confuso, hasta para mí, y he estado usando la 
Internet por más de 10 años. En el 2005, es increíble que las personas todavía hagan esto. 
No lo haga. No obligue a los vínculos a abrirse en ventanas nuevas. 


Por favor note que este consejo es acerca de usted como un diseñador de Internet, no como 
un usuario de Internet. Si usted quiere abrir una nueva ventana mientras usted navega la 
Internet, hágalo. En Internet Explorer para Windows, deje presionada la tecla shift 
mientras hace clic en un vínculo para abrir el vínculo en una ventana nueva. En Netscape 6 
y Mozilla, mantenga presionado Contro1. En Internet Explorer para Mac, mantenga 
presionado Command (Algunos navegadores como Opera soportan combinaciones avanzadas 
como Control + shift + Clic para abrir un vínculo en una ventana nueva en el fondo). El 
punto es que la elección de si un vínculo se abrirá en una ventana nueva debe ser del 
usuario, no del diseñador. 


Quien se beneficia? 


1. Jackie se beneficia. Aunque JAWS anuncia “Nueva ventana de navegador” cuando 
un vínculo abre una ventana nueva, esto es fácil de obviar, mientras es dicho de 
manera apretada entre la lectura del texto del vínculo y la lectura de la página 
nueva. Home Page Reader tiene una solución mejor; toca un sonido distintivo cada 
vez que se abre una nueva ventana. Y Window Eyes, otro popular lector de pantalla, 
no ofrece ninguna indicación de que se abrió una ventana nueva en absoluto. 


Y a pesar de todo, se rompe el flujo del botón “Atrás”. Si Jackie no escucha el 
anuncio de “nueva ventana de navegador”, no puede simplemente mirar su barra de 
tareas y ver que dos ventanas del navegador están abiertas. Necesitara leer su listado 
completo de ventanas abiertas, ya sea usando el acceso directo INSERT+F10, 
especifico del programa JAWS para conseguir un listado de ventanas, o el 
tradicional ALT+TAB. 





2. Lillian se beneficia. Su ventana de Internet Explorer está siempre maximizada (para 
que pueda verla), y las ventanas nuevas también son maximizadas por defecto. 
Además, Windows XP agrupa las ventanas múltiples de la misma aplicación en la 
barra de tareas, así que básicamente no existe ninguna indicación visual de que una 
ventana nueva ha sido abierta. De repente, el botón “Atrás” esta deshabilitado por 
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ninguna razón aparente, y Lillian no tiene idea del por que. Si estaba esperando que 
ella leyera el resto de su sitio de Internet luego de que siguiera ese vínculo, puede 
olvidarse de ello. 


Bill se beneficia. Su hermana ha ajustado su navegador Mozilla para que pueda 
navegar usando pestañas, para que Bill pueda ver los can mirar las pestañas y 
recordar rápidamente cuales ventanas tiene abiertas, y también para que pueda 
cambiar rápidamente entre estas (usando CTRL+PAGEUP Y CTRL+PAGEDOWN en su 
extensión del teclado). Los vínculos que son forzados a abrirse en una nueva 
ventana abrirán una ventana de Mozilla completamente nueva. Esto no solo se 
desviará de sus preferencias de navegación, sino que también le hará parecer como 
que todas las ventanas abiertas han desaparecido, ya que la nueva ventana del 
navegador no mostrará las pestañas que estaban abiertas en la ventana previa. 








Como hacerlo 


1. 


2; 


No use <a target="_blank"> para forzar a los vínculos a que se abran en una 
ventana nueva. 

Si debe obligatoriamente abrir el vínculo en una nueva ventana, avise 
explícitamente al lector. Esta es una solución no optima, que ha sido traída por los 
requisitos de negocios que implican el “no estar asociados” con contenido externo. 
Por ejemplo, la página de CNN de "sitios relacionados” hace esto. 

Si tiene un checkbox para “abrir vínculos en ventanas nuevas”, asegúrese de que no 
esté marcado por defecto. 


Lectura añadida 


Jakob Nielsen: Los Diez Principales Errores Nuevos del Diseño de Internet, artículo 
en inglés. “#1: Romper o Entorpecer el Botón Atrás. #2: Abrir Nuevas Ventanas del 


Navegador.” 

Iniciativa de Accesibilidad de Internet de la W3C: Ejemplo de Puntos de 
Verificación 10.1 ofrece un ejemplo de cómo advertir a los usuarios si tiene un solo 
enlace que debe abrir obligatoriamente en una ventana nueva, diapositivas en inglés. 
Lista de correo del Validador de la W3C: Re: abrir un vínculo en una ventana 
nueva, artículo en inglés. Para aquellos a los que les importa esta clase de cosas, 
deben saber que el atributo target de la etiqueta <a> está desaprobado, y evitará 
que sus páginas sean validas en HTML 4.01 Strict, XHTML 1.0 Strict, o en 
cualquier versión futura. 

Lista de correo de WebAIM: los vínculos mailto: abren nuevas ventanas, 
artículo en inglés. El consenso es que los vínculos de mailto: no son un problema 
de accesibilidad, aunque generalmente estos abren el gestor de emails en una 
ventana nueva, porque esta conducta se completa de acuerdo con el lado del gestor. 
Un formulario de correo basado en Web (como el que usa Radio) podría ser una 
solución mejor en general, provisto que el formulario sea accesible. Un formulario 
basado en Web funcionará para visitantes que no tengan gestores de email 
integrados (por mal configuración o por una circunstancia especifica, como el estar 
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en un laboratorio publico), y protege su dirección de correo electrónico del spam sin 
hacer uso de trucos de JavaScript inaccesibles. Por otro lado, algunas personas 
realmente prefieren sus gestores debido a la familiaridad, funcionalidad (tal como 
chequeo ortográfico dentro del programa), y la habilidad de archivar los mensajes 
salientes. No estoy recomendando ningún método por encima de otro. 
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Día 17: Definir acrónimos 


Usé 50 acrónimos y abreviaciones en mi registro de apuntes (weblog) el mes pasado: ADA, 
ALT, AOL, API, CGL CMS, CSS, CTRL, DMV, DNS, DTD, EFF, FAQ, FSF, GFDL, 
GIA, GPL, HTML, IE, IRC, IIS, IO, KB, KDE, LONGDESC, MB, MSDN, MSN, MT, 
Mac, NC, OPML, P2P, PGDN, PGUP, PBS, PDF, PONUR, RSS, RU, SOAP, SSN, TDD, 
US, VNC, W3C, WCAG, WYSIWYG, Win, XHTML, y XML. 


Si reconoce cada uno de los 50, felicitaciones; tendrá un futuro largo y prospero como 
editor técnico. Si no, apreciará el hecho de que definí cada término con la etiqueta 
<acronym>. Ponga el cursor sobre cada acrónimo para ver lo que significa. Esto funciona 
en todos los navegadores modernos, y es inofensivo en el Netscape 4. 


Debería definir un acrónimo cada vez que lo use, o al menos una vez en cada apunte. 
Quien se beneficia? 


1. Michael se beneficia. Cuando Michael pone el cursor sobre un acrónimo, Opera 
muestra el titulo del acrónimo como una información sobre herramientas. 

2. Bill se beneficia. Mozilla va aun más allá, y muestra los acrónimos con un 
subrayado de puntos. Cuando Bill pone su cursor sobre el acrónimo, Mozilla cambia 
el cursor a un cursor de signo de interrogación, y luego muestra el titulo de 
acrónimo como una información sobre herramientas (Puede contrarrestar esta 
conducta por defecto con hojas de estilo en cascada, o usar CSS para mostrar un 
efecto similar en otros navegadores). 

3. Google se beneficia. Google clasifica el titulo del acrónimo así como el acrónimo 
mismo, para que las personas puedan encontrar su sitio ya sea si buscan por el 
acrónimo o la descripción completa. 

4. Desearía poder decir que Jackie se beneficia, pero no lo hace. Ni JAWS ni ninguno 
de los otros lectores de pantalla en el mercado soportan la lectura de los títulos de 
los acrónimos. Espero que algún día lo hagan, y entonces estará por delante en el 
juego. 





Como hacerlo 


La primera vez que use un acrónimo, márquelo con la etiqueta <acronym>, así: 

<acronym title="cascading style sheets">CSS</acronym> 

Los usuarios de pueden automatizar este marcaje usando accesos directos. Desde su página 
inicial de Radio, haga clic en "Shortcuts" en el menú principal de navegación, y luego 


defina los acrónimos que usa frecuentemente. Por ejemplo: 


Name: css 
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Value: <acronym title="cascading style sheets">CSS</acronym> 


(Asegúrese de cambiar el tipo entrada de "WYSIWYG" a "Source" para que pueda editar 
su HTML directamente.) 


Luego, en su apunte, simplemente escriba "CSS" (con las comillas), y Radio lo mostrará 
con la etiqueta y el titulo del acrónimo, justo como lo definió. 


Como hacerlo: hojas de estilos en cascada 


Adicionalmente, puede cambiar como se muestran los acrónimos usando hojas de estilos en 
cascada. Esto funciona en todas las herramientas, no solo en Radio. Esta es la regla que uso 
para producir el subrayado de puntos en todos los navegadores (no solo en Mozilla): 


acronym { 
border-bottom: 1px dotted black; 
} 


Y como una bonificación adicional, esta es la regla que uso en mi hoja de estilo para 
impresión, para deletrear automáticamente cualquier acrónimo a imprimir mis páginas de 
Internet (Esto solo funciona cuando imprime desde Mozilla y Opera, pero es inofensivo en 
otros navegadores). 


acronym:after { 
content: " (" attr(title) ")"; 


} 
Lectura añadida 
Ha estado usando acrónimos sin saber lo que significan? Búsquelos. 
e La base de datos de acrónimos y abreviaturas más grande de la Web. Acronyma. 


+ Base de Datos de Acrónimos, artículo en inglés. Acronym Database. 
+ Búsqueda de Acrónimos, artículo artículo en inglés. Acronym Search. 


Comentario 
Muchos gurus obsesionados con el marcaje han señalado correctamente que existe una 
etiqueta <abbr> para abreviaciones. Desafortunadamente, ninguna versión de Internet 


Explorer para Windows soporta esta etiqueta; no muestra ningún tipo de información de 
herramientas. Use <acronym>. 
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Día 18: Dar a su calendario un encabezado real 


“Pero”, ya le escucho quejarse, “mi calendario ya tiene un encabezado. Mira está ahí 
mismo, tiene el mes y el año justo arriba. Hasta está en negrita”. 


Pero si busca en el código fuente de su HTML, vera que su calendario no tiene un 
encabezado real. Lo más probable es que tenga una celda de la tabla definida para que 
ocupe la primera fila completa, con una regla de CSS para que aparezca en negrita. Esto es 
mucho más fácil de hacer con una etiqueta de <caption>. Es más fácil de leer en su 
plantilla, ahorra unos cuantos bytes en su página, se ve exactamente igual en los 
navegadores visuales, y es más accesible. 


Quien se beneficia? 


" 





1. Marcus se beneficia. Lynx muestra el encabezado con la palabra "CAPTION: 
(ENCABEZADO) en frente, dejando perfectamente claro que esta línea es el 
encabezado y no las cabeceras de columnas ni los datos de la tabla. 

2. Jackie se beneficia indirectamente. Usando una etiqueta de encabezado real 
<caption> aclara el camino para el uso de cabeceras de tablas reales, lo que 
beneficia a Jackie en maneras que discutiremos mañana. 


Como hacerlo 


Solo puede hacer esto en herramientas de publicación que soportan calendarios (lo que 
descarta al Blogger) y que les permitan cambiar el HTML generado por los calendarios (lo 
que descarta al Manila). 


En Movable Type, probablemente tiene una tabla para su calendario en su plantilla de 
Indice Principal (Main Index) que comienza así (si busca “calendarhead” probablemente lo 
encuentre): 


<table border="0" cellspacing="4" cellpadding="0"> 

<tr> 

<td colspan="7" align="center"><span class="calendarhead"><$MTDate 
format="%B %Y"$></span></td> 

</tr> 

<tr> 

<td align="center"><span class="calendar">Dom</span></td> 


Deje la etiqueta de la tabla, pero reemplace la primera fila completa con una etiqueta de 
encabezado real <caption>, así: 


<table border="0" cellspacing="4" cellpadding="0"> 
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption> 
<tr> 
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<td align="center"><span class="calendar">Dom</span></td> 


Deje el resto como está; lo arreglaremos mañana. 


El atributo class en el encabezado <caption> es opcional; lo deje allí para que pueda 
funcionar como un reemplazo en la plantilla por defecto del Movable Type, que usa regla 
de CSS para hacer que el mes y el año se muestren en negrita. Usando la etiqueta 
<caption> como se muestra, su página deberá verse exactamente igual a como se veía 
anteriormente. 


En Greymatter, el concepto es el mismo pero las etiquetas de la plantilla son diferentes: 


<caption>((monthword)) ((1yearyear))</caption> 


De nuevo, puede cambiar el estilo visual del encabezado caption usando hojas de estilos 
en cascada, si así lo desea. 


En Radio, el proceso es un poco más difícil, pero no imposible (Tengo una deuda con Tony 
Bowden por estas instrucciones). 


1. En Radio, primero abra la aplicación actual. En Windows, haga clic derecho en el 
pequeño icono de Radio en su área de notificación y seleccione "Open Radio" 
(Abrir Radio). 

2. Bajo el menú "Tools" (Herramientas), seleccione "Developers" (Desarrolladores), 
luego "Jump..." (Saltar...) (Contro1+3). Salte a 
"system.verbs.builtins.radio.weblog.drawCalendar” (sin comillas). 

3. Ahora vaya al menú "Edit" (Edición), "Find and Replace" (Buscar y Reemplazar), 
"Find..." (Buscar...) (Contro1+F) y busque "hCalendarTable". Esto debe revelar el 
bloque de código que dibuja la etiqueta de tabla inicial y el encabezado falso del 
calendario. 

4. Cambie la ultima línea de ese bloque (que escribe el monthYearString en una 
etiqueta de fila de tabla <tr>) a esto: 


añada ("<caption>" + monthYearString + "</caption>") 
5. Cierre la ventana. Le preguntará si desea compilar los cambios, elija que si. 


1. Si quiere, puede aplicar estilos a este encabezado. Vaya a su plantilla de Página de 
Inicio (Home Page Template) (en la página de Preferencias) y añada estilos a el 
encabezado caption. Estos son los que yo uso. En el lugar en que mi sección de 
<style> contenía esto: 


body, td; p { 
font-family: verdana, sans-serif; 
font-size: 12px; 


} 


Sumérjase en la Accesibilidad 39 


Ahora contiene esto: 


body, td, p, caption { 
font-family: verdana, sans-serif; 
font-size: 12px; 


} 


caption { 
text-align: center; 
font-weight: bold; 
} 


Lectura añadida 


e Tony Bowden: Cambiar el calendario en Radio, artículo en inglés. 
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Día 19: Usar cabeceras de tabla reales 


Si tiene un calendario en su sitio de Internet, debe ser creado como una tabla de HTML. Ha 
habido unos pocos intentos de crear calendarios hechos completamente en CSS. Esto es 
desafortunado; ya que los calendarios son tablas de datos, y deben ser marcados como tal. 


Lo más importante acerca de los datos de una tabla es marcar las cabeceras de manera 
correcta. En el caso de un calendario, esto significa que los días de la semana deben ir en la 
parte superior. Definitivamente debe incluir cabeceras para los días de la semana; si no 
quiere que sean visibles puede hacerlos invisibles con CSS (Hago esto en mi propio registro 
de apuntes). Pero las cabeceras deben estar hay como quiera, porque los lectores de pantalla 
cuentan con esto para ayudar a los usuarios ciegos a navegar a través de la tabla sin que se 
pierdan. 


El asunto con un calendario (y con cualquier tabla de datos, realmente, pero hoy vamos a 
hablar de calendarios principalmente) es que es muy fácil de usar si puede verla 
completamente, pero muy difícil de usar di solo puede ver un numero a la vez. Imagine que 
tenga un calendario diario en su escritorio, pero cada página enlista solamente el día del 
mes, sin el día de la semana. Una página tras otra, 1, 2, 3, 4, 5, 6, 7... Hoy estamos a 4, y 
esto seguro de que es jueves. Ahora salte al 11, 12, 13. Rápidamente, dígame que día de la 
semana es el 13. La página no se lo dice; tiene que llevar la cuenta por sus propios medios. 


Así es como un usuario ciego debe navegar por un calendario sin las cabeceras apropiadas. 
Tiene un paquete de números, pero ningún contexto para llevar la cuenta de estos. Añadir 
cabeceras apropiadas al calendario permite a las aplicaciones de lectura de pantalla asociar 
la cabecera de la tabla (el día de la semana) con los datos de la tabla (día del mes), y leerlos 
en conjunto. “jueves 4, jueves 11, viernes 12, sábado 13”. Oh, es sábado. 


Note que dije cabeceras apropiadas. Poner los días de la semana en etiquetas de celdas de 
tabla <ta> en la primera fila no es suficiente. Necesitan ser etiquetas de cabeceras de tabla 
<th>, en su lugar. La mayoría de las plantilla de los registros de apuntes (weblog) fallan en 
esto, pero es muy sencillo arreglarlo, y su calendario se vera exactamente igual en los 
navegadores visuales cuando termine. 


Quien se beneficia? 


1. Jackie se beneficia. Cuando ella se encuentra con su calendario, JAWS primero lee 
el encabezado, luego anuncia las cabeceras, y después Jackie puede mantener 
presionado Control + ALT y moverse por el calendario con las teclas de flechas. 
Mientras se mueve, JAWS anuncia la cabecera (el día de la semana) y los datos de 
la celda (el día del mes). 


Todos los lectores de pantalla importantes permiten este tipo de navegación. El 


Home Page Reader permite a los usuarios cambiar a un modo llamado "Table 
Navigation" (Navegación por Tablas, ALT+T), y luego moverse por el calendario sin 
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mantener apretadas teclas adicionales. El Home Page Reader va un paso más allá 
que el JAWS. Como veremos en un minuto, usted puede definir un titulo mas corto 
(o más largo) para cada cabecera de tabla (más o menos como añadir un título a un 
vínculo), y Home Page Reader leerá este titulo en vez del texto original de la 
cabecera. Esto significa que puede mostrar visualmente sus días de la semana como 
"Dom", "Lun", "Mar", pero decirle a Home Page Reader que lo lea como 
"Domingo", "Lunes", "Martes". Genial. 


Como hacerlo 
Si todavía no lo ha hecho, asegúrese de que su calendario tenga un encabezado real. La 


etiqueta <caption> debe ser la primera después de la etiqueta de tabla <table>, y las 
etiquetas de fila de cabecera <th> deben ser las primeras después de esas. 





En Movable Type, encuentre su calendario en su Plantilla de Indice Principal (Main Index 
Template) (De nuevo, haciendo una búsqueda por "calendarhead" probablemente lo 
encontrará). Inmediatamente después de la etiqueta <caption>, vera los días de la semana 
definidos así: 


<tr> 

<td align="center"><span class="calendar">Dom</span></td> 
<td align="center"><span class="calendar">Lun</span></td> 
<td align="center"><span class="calendar">Mar</span></td> 
<td align="center"><span class="calendar">Mie</span></td> 
<td align="center"><span class="calendar">Jue</span></td> 
<td align="center"><span class="calendar">Vie</span></td> 
<td align="center"><span class="calendar">Sab</span></td> 
</tr> 











Cámbielo a esto: 


<tr> 

<th abbr="Domingo" align="center"><span class="calendar">Dom</span></th> 
<th abbr="Lunes" align="center"><span class="calendar">Lun</span></th> 
<th abbr="Martes" align="center"><span class="calendar">Mar</span></th> 
<th abbr="Miércoles" align="center"><span 
class="calendar">Mie</span></th> 
<th abbr="Jueves" align="center"><span class="calendar">Jue</span></th> 
<th abbr="Viernes" align="center"><span class="calendar">Vie</span></th> 
<th abbr="Sábado" align="center"><span class="calendar">Sab</span></th> 
</tr> 











Aquí hay dos cosas importantes: todas las etiquetas de celda (<td>) cambian a (<th>), y a 
todas se les pone el atributo "abbr" para especificar el nombre completo del día de la 
semana (El atributo "abbr" puede servir un doble propósito. Para cabeceras muy largos, 
puede servir como una abreviación; de ahí si nombre. Pero para cabeceras de tabla muy 
cortos, sirve como una versión más larga, que es lo que estamos haciendo aquí). 


En Radio, el procedimiento es similar al que hizo ayer, al poner un encabezado real a una 
tabla. 
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1. En Radio, primero abra la aplicación actual. En Windows, haga clic derecho en el 
pequeño icono de Radio en su área de notificación y seleccione "Open Radio" 
(Abrir Radio). 

2. Bajo el menú "Tools" (Herramientas), seleccione "Developers" (Desarrolladores), 
luego "Jump..." (Saltar...) (Contro1+3). Salte a 
"system.verbs.builtins.radio.weblog.drawCalendar” (sin comillas). 

3. Ahora vaya al menú "Edit" (Edición), "Find and Replace” (Buscar y Reemplazar), 
"Find..." (Buscar...) (Contro1+F) y busque "addDayName". Esto debe revelar y 
resaltar la función addDayName. Haga doble clic en el triangulo para revelar el 
código de la función, que debe verse como este: 


on addDayName (name) 
add ("<td width=1"191" height=1"101" align=1"center" 
style=1"font-size:9px1">" + name + "</td>") 


4. Cámbielo a esto: 


on addDayName (name, fullname) 
add ("<th abbr=Y"" + fullname + "AX" width=Y"191" height=1"101" 
align=1"centerx" style=X"font-size:9pxX">" + name + "</th>") 


5. Ahora haga doble clic en la línea "for i = 1 to 7" justamente debajo para ver 
esto: 


for i = 1 to 7 
addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + 
i)) 


6. Y cámbielo por esto: 


for i = 1 to 7 
addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + 
i), radio.string.getLocalizedString ("dayOfWeek." + i)) 


Nota muy importante para tablas usadas para disposición 


Las tablas usadas para presentación visual tienen un conjunto de reglas totalmente distintas. 
No use etiquetas de cabecera <th> en tablas para disposición. Además de ajustar sus tablas 
para presentar su contenido principal inicialmente, hay muy pocas cosas que necesita hacer 


para sus tablas sean accesibles. Discutiremos un pequeño detalle mañana. 

Lectura añadida 

Si necesita marcar tablas de datos más complejas que un calendario (como tablas con 
múltiples niveles de cabeceras y sub-cabeceras), está por su cuenta. He aquí algunos puntos 


de inicio: 


e Jim Byrne: Modales en la mesa (Table manners), artículo en inglés. 
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e WebAIM: Crear tablas que se transformen con fluidez, artículo en inglés. 
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Día 20: Proveer un resumen para las tablas 


La pieza final del marcaje de tablas es proveer un resumen. El resumen de una tabla nunca 
se ve en los navegadores visuales; está diseñado exclusivamente para los lectores de 
pantalla y los navegadores de habla. Es exactamente como su nombre lo indica: un 
resumen, una descripción mas larga que su el encabezado. Regularmente se lee justo antes 
del encabezado. 


Cada tabla debería tener un resumen. Si tiene un calendario, el resumen puede ser tan 
simple como: “Calendario mensual con los vínculos a los apuntes diarios”. Si usa tablas 
para la presentación, debería poner un resumen vacío en esas tablas, para indicar que la 
tabla se usa exclusivamente para la disposición visual y para presentar datos tabulares (Este 
es un concepto similar al de proveer un atributo ALT vacío en imágenes utilizadas 
exclusivamente para espaciamiento visual. Discutiremos estas “imágenes de 
espaciamiento” el próximo día). 


Quien se beneficia? 


1. Jackie se beneficia. Cuando JAWS encuentra su calendario, Jackie escucha, 
“Resumen: Calendario mensual con los vínculos a los apuntes diarios”. Luego ella 
escucha el encabezado, luego escucha las cabeceras de tabla, y finalmente puede 
navegar a través del calendario. 

2. Los usuarios de ¡Cab se benefician. El ¡Cab puede usar las capacidades de texto-a- 
habla del sistema operativo MAC para leer páginas de Internet, y leerá el resumen 
de todas las tablas que definan uno. 











Como hacerlo: calendario 
En Movable Type, encuentre el calendario en su Plantilla de Indice Principal (Main Index 
Template) (De nuevo, haciendo una búsqueda por "calendarhead” probablemente lo 
encontrará). Verá una tabla (<table>) como esta: 

<table border="0" cellspacing="4" cellpadding="0"> 


Cámbielo a esto: 


<table border="0" cellspacing="4" cellpadding="0" summary="Calendario 
mensual con los vínculos a los apuntes diarios"> 


En Radio, el procedimiento es similar al que hemos hecho en los días pasados. 
1. En Radio, primero abra la aplicación actual. En Windows, haga clic derecho en el 


pequeño icono de Radio en su área de notificación y seleccione "Open Radio" 
(Abrir Radio). 
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2. Bajo el menú "Tools" (Herramientas), seleccione "Developers" (Desarrolladores), 
luego "Jump..." (Saltar...) (Contro1+3). Salte a 
"system.verbs.builtins.radio.weblog.drawCalendar" (sin comillas). 

3. Ahora vaya al menú "Edit" (Edición), "Find and Replace" (Buscar y Reemplazar), 
"Find..." (Buscar...) (Contro1+F) y busque "draw the month and year". Esto debe 
revelar y resaltar una línea que dice simplemente "bundle // draw the month 
and year". Haga doble clic en el triangulo para revelar el código, que debe de verse 
así: 


add ("<table cellspacing=1"0" border=1"01" 
class=1"hCalendarTable1">"); indentLevel++ 


4. Cámbielo a esto: 


add ("<table summary=1"Calendario mensual con los vínculos a 
los apuntes diarios MX" cellspacing=1"01" border=1"0X" 
class=1"hCalendarTable1">"); indentLevel++ 


Como hacerlo: tablas de presentación 


Si usa tablas para presentación, añada summary="" a cada tabla. Esto se realiza mejor con 
buscar y reemplazar. Busque por esto: 


<table 


Y reemplácelo con esto: 


<table summary="" 
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Día 21: Ignorar las imágenes espaciadoras (spacer 
images) 


Muchos diseñadores usan imágenes espaciadoras transparentes para controlar la disposición 
de su sitio de Internet en los navegadores visuales. Usted puede usar tantas como quiera, 
pero necesita especificar explícitamente un atributo alt en cada imagen espaciadora para 
que los navegadores no visuales sepan ignorarlas. 


Quien se beneficia? 


1. Marcus se beneficia. Por defecto, Lynx muestra el nombre de archivo de cualquier 
imagen que no contenga un atributo a1t. Muchas plantillas populares para registros 
de apuntes incluyen muchas imágenes espaciadoras incluso antes del nombre del 
sitio. Usted no se da cuenta en su navegador visual, claro está, pero esto es lo que ve 
Marcus: 


[shim.gif] [shim.gif] 
[shim.gif] 

[shim.gif] 

Welcome To My Web Site 
[ciblueHeader2.gif] 
[ciblueCurve2.gif] 





2. Jackie se beneficia. Por defecto, JAWS lee el nombre de archivo de cualquier 
imagen que no contiene un atributo a1t. Si creía que Marcus estaba incómodo, 
imagine lo frustrante que debe ser para Jackie oír esto: 


graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif 
welcome to my web site graphic ciblue header two dot gif graphic ciblue curve two 
dot gif 


Si usted se presentara así en la vida real, nadie le hablaría nunca. 
Como hacerlo 


Los usuarios de Radio pueden tomarse el día libre. Radio genera automáticamente los 
atributos alt para todas las imágenes espaciadoras. (Gracias, Jake.) Si ve el código fuente 
de su página de inicio y no ve alt="" en ninguna de sus imágenes espaciadoras, actualice 
Radio.root y publique su sitio de nuevo. 


Los usuarios de otras herramientas de publicación deben buscar en sus plantillas por 
etiquetas <img> con nombres como “spacer .gif”, “shim.gif”, “1.gif”, o cualquier 
imagen que aparezca numerosas veces dentro de su plantilla, posiblemente con los atributos 


de width and height con diferentes valores cada vez. 
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Por ejemplo, para cada imagen espaciadora que se parezca a esta: 
<img src="spacer.gif" width="1" height="10"> 
Cámbiela a esto: 

<img src="spacer.gif" alt="" width="1" height="10"> 


Si ha utilizado varias veces la misma imagen espaciadora, probablemente sea mejor hacer 
esto con búsqueda y reemplazo global. 


Cosas que no debe hacer 


1. No defina alt=" ". El atributo a1t debe estar vacío, no con un espacio. 
No especifique un atributo a1t en su etiqueta <body>, aunque esta defina una 
imagen de fondo. Esta imagen de fondo es ignorada siempre por los navegadores no 
visuales. Se muestra así: 


<body background="http://url/to/image.gif"> 

3. No especifique un atributo a1t en las etiquetas <td>, aun cuando define imágenes 
de fondo para las celdas. Estas imágenes de fondo son ignoradas siempre por los 
navegadores no visuales. Se muestran así: 
<td background="http://url/to/image.gif"> 


Lectura añadida 


e WebAIM: Como crear gráficos accesibles, artículo en inglés. 
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Día 22: Usar listas reales (o simularlas de manera 
correcta) 


Suponga que tiene un blogroll de tres vínculos: Slashdot, The Register, y dive into mark. 
En vez de usar una aburrida viñeta negra, quiere usar una lujosa imagen al lado de cada 
uno. Como hacerlo. La solución más sencilla es usar etiquetas de <img> junto a cada 
vínculo. Esto funciona, y puede hacerse fácilmente más accesible por medio de la adición 
de texto alt correcto en cada imagen. 


Sin embargo, puede ir mas allá y usar un marcaje de lista real (etiquetas <u1> and <li>), y 
luego usar CSS para cambiar la aburrida viñeta negra a una imagen. Además de ser “la 
manera correcta de hacerlo” en algún sentido académico que podría o no importarle, esta 
técnica tiene beneficios de accesibilidad adicionales. 


Les daré ejemplos de ambas técnicas en un instante. 
Quien se beneficia? 


1. Marcus se beneficia. Como vimos ayer, Lynx muestra el nombre de archivo de 
cualquier imagen que no tiene un atributo alt. 

2. Michael se beneficia. Links nunca muestra imágenes, pero por defecto no muestra 
nada para imágenes sin texto alt. Esto era aceptable ayer, cuando queríamos 
ignorar las imágenes espaciadoras, pero hoy queremos asegurarnos de que exista 
alguna indicación de que esto es una lista, así que necesitamos el texto alt. 





También, cuando Michael navega con las imágenes desactivadas, Opera muestra el 
texto alt en lugar del bloque de la “imagen faltante”. Y si usa la técnica avanzada, 
Opera lo hará mucho mejor, ya que se revierte y muestra la viñeta negra tradicional 
en lugar del bloque de la “imagen faltante”. 


3. Jackie se beneficia. Como vimos ayer, JAWS lee el nombre de archivo de cualquier 
imagen que no tenga el atributo a1t. Los vínculos terminan perdiéndose en un mar 
de nombres de archivos sin importancia. Esto es lo que escucha Jackie: 


fancy dot dot gif vínculo slashdot, fancy dot dot gif vínculo the register, fancy dot 
dot gif vínculo dive into mark 


Proveer un asterisco como texto para el alt ayuda enormemente. JAWS notará que 
la imagen se está usando como una viñeta, y no la anunciará. Sin embargo, Home 


Page Reader anunciará el asterisco explícitamente, y los usuarios escucharan esto: 


asterisco vínculo slashdot, asterisco vínculo the register, asterisco vínculo dive into 
mark 
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Usar el marcaje de lista real es lo mejor. Ya que toda la presentación visual está en 
las declaraciones de CSS, ninguna abarrota la página, y tanto JAWS como Home 
Page Reader leen simplemente su lista por lo que es: una lista. Ahora se escucharía 
así: 


vínculo slashdot, vínculo the register, vínculo dive into mark 
Como hacerlo 


Si tiene un blogroll que se ve así: 


<img src="/images/fancydot.gif" width="8" height="8"> <a 
href="http://www.slashdot.org/">Slashdot</a> <br> 

<img src="/images/fancydot.gif" width="8" height="8"> <a 
href="http://www.theregister.co.uk/">The Register</a> <br> 
<img src="/images/fancydot.gif" width="8" height="8"> <a 
href="http://diveintomark.org/">dive into mark</a> <br> 


Debe proveer atributos a1t para todas las imágenes de viñetas. Use un asterisco como es 
texto del alt, para simular como se vería la lista si estuviera usando marcaje real (Para 
prevenir que esto se muestre como una información de herramientas en los navegadores 
visuales, debería proveer también un atributo title vacío). 


<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a 
href="http://www.slashdot.org/">Slashdot</a> <br> 

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a 
href="http://www.theregister.co.uk/">The Register</a> <br> 

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a 


href="http://diveintomark.org/">dive into mark</a> <br> 


Como hacerlo: avanzado 


La técnica avanzada (y preferida) usa CSS para definir la imagen que se va a usar como 
viñeta en la lista. 


<style type="text/css"> 
ul.blogrol1l ( 
list-style: url(/images/fancydot.gif) disc; 
) 
</style> 











Luego en su plantilla, puede escribir su lista usando marcaje real: 


<ul class="blogroll"> 

<li><a href="http://www.slashdot.org/">Slashdot</a></1li> 

<li><a href="http://www.theregister.co.uk/">The Register</a></li> 
<li><a href="http://diveintomark.org/">dive into mark</a></1li> 
</ul> 
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Resultados: 


Los navegadores modernos mostraran la imagen como la viñeta de la lista. 

Los navegadores con imágenes desactivadas mostrarán la monótona viñeta negra. 
El Netscape 4 mostrará siempre la monótona viñeta negra. 

Los navegadores exclusivamente de texto ignorarán siempre el CSS, así que 
mostrarán la lista de la manera en que muestran las listas normalmente (usualmente 
usando un asterisco como viñeta para la lista). 


Comentario: listas sin viñetas 


Otra forma común de crear un listado de vínculos es sin usar imágenes de ningún tipo, solo 
un conjunto de vínculos, posiblemente alineados a la derecha, así: 


<div align="right"> 

<a href="http://www.slashdot.org/">Slashdot</a><br> 

<a href="http://www.theregister.co.uk/">The Register</a><br> 
<a href="http://diveintomark.org/">dive into mark</a><br> 
</div> 


Esto también se puede hacer con CSS y con marcaje de lista real: 


<style type="text/css"> 

ul.blogrol1l ( 
list-style: none; 
text-align: right; 











) 
</style> 


O, si quiere vínculos alineados a la izquierda, puede hacerlo así: 


<style type="text/css"> 

ul.blogrol1l ( 
list-style: none; 
margin-left: 0; 
padding-left: 0; 














) 
</style> 


De cualquier modo, el marcaje de la lista no ha cambiado en relación con el del ejemplo 
anterior: 


<ul class="blogroll"> 

<li><a href="http://www.slashdot.org/">Slashdot</a></1li> 

<li><a href="http://www.theregister.co.uk/">The Register</a></li> 
<li><a href="http://diveintomark.org/">dive into mark</a></1li> 
</ul> 
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La línea "list-style: none" suprime la viñeta negra habitual de los navegadores 
visuales. Esto funciona en todos los navegadores, inclusive en Netscape 4. Gracias a Tobias 
Schmidt por recordarme esta técnica. 


Lectura añadida 


e Tobias Schmidt: Estilizar listas con CSS (Styling lists with CSS), artículo en inglés. 

e W3Schools: Propiedades relativas a las listas en CSS (CSS List Properties), artículo 
en inglés. 

e Eric Meyer: Listas y Sangría (Lists and Indentation), artículo en inglés. 

e Eric B. Bednarz: Manipular las Propiedades Margen y Padding de Listas en CSS, 
artículo en inglés. 
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Día 23: Proveer texto equivalente para las imágenes 


Este es el día más importante de la serie, así que presten atención: 


Cada imagen de cada página de su sitio de Internet debe tener un equivalente textual, 
apodado "a1t text", especificado en el atributo a1t de la etiqueta <img>. 


Los lectores de pantalla lo leen, los navegadores de texto lo muestran, Google lo clasifica, y 
los navegadores visuales pueden mostrarlo como una información de herramienta o en la 
línea de estado (aunque usted como diseñador puede anularlo). Ya hemos visto como 
especificar texto a1t vacío para imágenes espaciadoras, y diversas formas de crear listados 
accesibles para viñetas con imágenes. Que nos queda? 





Iconos Permalink 

Iconos "Powered by" 

Iconos Mail-to 

Iconos XML 

Gráficos pequeños flotando dentro sus ítems de apuntes 
Cualquier otra imagen que haya añadido a su plantilla 


Todos estos necesitan texto alt apropiado. 


Quien se beneficia? 


Jackie se beneficia. JAWS lee el texto alt. Sin texto alt valido, Jackie escucha el 
nombre de archivo, que suena horrible. 

Marcus se beneficia. El navegador Lynx, como navegador de texto, no muestra 
imágenes, solo texto alt. Sin texto alt, Lynx muestra el nombre del archivo, que se 
ve tan mal como suena en JAWS. 

Michael se beneficia. Links, como navegador de texto, no muestra imágenes, solo 
texto alt. Sin texto alt, Links no muestra nada en lugar de la imagen (a menos 
que la imagen sea un vínculo, en cuyo caso Links muestra " [ IMG]"). Al navegar en 
el Opera con las imágenes desactivadas, Michael ve el texto a1t en lugar de la 
imagen. 

Lillian se beneficia. El Internet Explorer muestra el texto alt como una 
información de herramienta (aunque usted como diseñador puede suprimir esto). 
Google se beneficia. El Googlebot clasifica el texto a1t, y este es usado no solo 
para buscar palabras clave compatibles en las búsquedas normales, pero también en 
las búsquedas de imágenes (Como creías que funcionaba esto?) 





Sumérjase en la Accesibilidad 53 


Como hacerlo 


La plantilla por defecto de Movable Type no incluye ninguna etiqueta <img>. Si está 
usando una imagen gráfica de "Powered by Movable Type", debe asegurarse de que la 
etiqueta <img> incluye el atributo alt="Powered by Movable Type". 


La plantilla por defecto de Greymatter incluye solamente una imagen, generada por la 
variable de plantilla ( (gmicon) y. Esto genera una etiqueta <img> que incluye el texto alt 
apropiado, "Powered by Greymatter". 


Radio auto-genera texto a1t apropiado para los siguientes iconos estándar: 


e Taza de café (XML coffee mug): alt="Subscribe to <site name> in Radio 
UserLand." 


e Icono XML: alt="Click to see the XML version of this web page." 


e Icono mailto: alt="Clic here to send an email to the editor of this 
weblog." 


Sin embargo, los usuarios de Radio necesitaran especificar manualmente el texto alt para 
imágenes personalizadas. Vaya a Prefs, luego a Customized Images (debajo de 
Templates), y añada estos atributos alt: 


e Permalink de nivel diario: alt="Permanent link: <%longDates3>". 
e Permalink a nivel de ítem: alt="Permanent link". 

e Icono de vínculo de fuente: alt="source". 

e Icono de vínculo de Enclosure: alt="enclosure". 





También puede añadir title="" para suprimir la información de herramientas en los 
navegadores visuales. 


Por supuesto, sin importar la herramienta de publicación, si ha añadido sus propias 
imágenes a su plantilla, o si tiene gráficos pequeños flotando dentro de los ítems de sus 
apuntes, cada uno necesita de texto alt apropiado. Como aprendo mejor por ejemplo, aquí 
hay algunos ejemplos. Más principios generales y ejemplos son listados en la sección 
“lectura añadida”. 


Ejemplos incorrectos de texto aıt 


e Cualquier marcaje de HTML. El texto a1t solamente puede contener texto normal y 
entidades, ninguna etiqueta. 

e alt="nombredearchivo.jpg". Esto no nos lleva a ningún lado. Cual es la función 

del gráfico? No nos importa como se llama. 

e  alt="texto alt". Insertado por algunos editores de HTML como recordatorio, y 

dejado allí por diseñadores despistados. 

e  alt="Haga clic aquí!" No sirve ningún propósito útil (a menos que este en un 
grafico que diga "Haga clic aquí!”). 
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e alt="Active las imágenes!" Esto es como que una persona no vidente le pida la 
hora, y que le responda, “Abra los ojos!” Las imágenes pueden estar desactivadas 
por alguna razón (como la lenta conexión de Michael), pueden no estar disponibles 
(en el navegador de texto de Marcus), o pueden que no estén desactivadas en 
absoluto (como en el lector de pantalla de Jackie, que muestra las imágenes pero lee 
el texto alt en voz alta). 


e Más ejemplos incorrectos de texto alt. 


Ejemplos correctos de texto aıt 


e Jonathon Delacour tiene un gráfico de un símbolo Chino en el anuncio publicitario 
de su página. alt="Logo del sitio: xin, the Chinese character for 
heart". 

e Leslie Harpold tiene un anuncio publicitario de su página que incluye el nombre del 
sitio, "The Historical Present", y un mensaje, "Hypermodernism has a posse". 
alt="the historical present: hypermodernism has a posse" 


e Simon Willison tiene un sticker de “W3C XHTML 1.0”. alt="Valid XHTML 
1,0!" 


e Jeffrey Zeldman tiene una barra de navegación de texto como gráficos. Al poner el 
Mouse encima, cada grafica pone un pequeño mensaje en la barra de estado con 
JavaScript. Desde luego, los usuarios ciegos se pierden de esto, así que Zeldman 
también puso el mismo texto en el texto a1t de cada gráfico. Habilidoso. 

e Dean Allen tiene un gráfico en el anuncio publicitario de su página que incluye el 
nombre del sitio y un mensaje. Su texto a1t es un poco largo e incluye un mensaje 
distinto (lo cual es un poco confuso), pero Dean es lo suficientemente habilidoso 


como para salirse con la suya. alt="Textism is an ephemeris focused on the 
composition, design, and reading of text. In addition, there will 


be pie". Nota: probablemente usted no sea lo suficientemente genial como para 
hacer esto. Haga algo sencillo. 


Lectura añadida 


e A. J. Flavell: Texto ALT en Imágenes, artículo en inglés. 


e Jukka Korpela: Pautas sencillas para el uso de texto ALT en elementos IMG, 
artículo en inglés. 


e lan Hickson: Preguntas más frecuentes acerca del texto alternativo en imágenes, 
artículo en inglés. 


e Watchfire.com: Provea texto alternativo para todas las imágenes, sitio en inglés. 
e All My FAQs Wiki: El atributo ALT, artículo en inglés. 

e WebAIM: Como crear Gráficos Accesibles, artículo en inglés. 

+. Martin Schrode: Sobre publicidad accesible, artículo en inglés. 

e Pautas de accesibilidad de la Sección 508: Qué significa texto equivalente? 
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Día 24: Proveer texto equivalente para los mapas de 
imágenes 


Me sorprendió el encontrar varios sitios de Internet de alto perfil que usan mapas de 
imágenes para los gestores. Yo no los uso, y pienso que no están incluidos en ninguna 
plantilla por defecto de registros de apuntes, pero aparentemente muchas personas los han 
entendido. Si no sabe lo que es un mapa de imagen, Leslie Harpold usa uno para los 
vínculos de navegación en la parte inferior de su sitio de Internet. Es solo una imagen, pero 
al hacer clic en la palabra “archivos” te lleva a una página, “por categoría”, te lleva a otra 
página, y así en adelante. 


Los mapas de imágenes suenan como una pesadilla de accesibilidad, pero en realidad no lo 
son. De la misma forma en que cada imagen necesita texto equivalente, cada mapa de 
imagen y cada área en que se puede hacer clic en un mapa de imagen necesita tener texto 
equivalente. Puede proveer texto alt para la imagen en si (en la etiqueta <img>), y para 
cada área en que se puede hacer clic en el mapa de imágenes (en la etiqueta <area> 
asociada con <map>, que define donde se encuentran las áreas de clic y hacia donde van). 





Quien se beneficia? 


1. Marcus se beneficia. Lynx muestra el texto alt de la imagen como un vínculo. 
Cuando Marcus presiona ENTER, Lynx muestra una página separada que enlista los 
vínculos del mapa de imágenes. Cada vínculo esta etiquetado por el texto alt de la 
etiqueta area en el mapa de imágenes. Sin texto a1t, Lynx muestra la dirección del 
vínculo de cada area, lo que puede ser incomprensible. 














Si Leslie no tuviese texto alt en su mapa de imágenes, este es el vínculo que vería 
Marcus en la parte inferior de su página: 


[USEMAP :hpfooter.gif] 











Al seguir este vínculo Marcus iría a una página que enlista todos los vínculos del 
mapa de imágenes. Sin texto alt, Lynx podría mostrar solamente cada URL, lo que 
se vería así: 





[USEMAP :hpfooter.gif] 
MAP: http://leslie.harpold.com/tMap 


. http://leslie.harpold.com/archives.html 
. http://leslie.harpold.com/category/ 

. http://leslie.harpold.com/links.html 

. http://leslie.harpold.com/leslie.html 
http: //www.moveabletype.org 


























04 0NnNRea 


Sumérjase en la Accesibilidad 56 


Sin embargo, en realidad, Leslie tiene texto alt apropiado para cada área de su 
mapa de imágenes. Así que esto es lo que Marcus realmente ve en la parte inferior 
de su página de inicio: 

Vínculos de navegación del sitio 


Al seguir este vínculo Marcus va a una página que se ve así: 


Vínculos de navegación del sitio 





MAPA: http://leslie.harpold.com/tMap 


previamente... 

por categoría 

acerca del sitio 

acerca de leslie 
Powered by Movable Type 


U a w o e 


Michael se beneficia. Links muestra el texto a1t de la imagen como un vínculo. 
Cuando Michael presiona ENTER, Lynx muestra una página separada que enlista los 
vínculos del mapa de imágenes. Cada vínculo esta etiquetado por el texto alt de la 
etiqueta area en el mapa de imágenes. Sin texto a1t, Lynx muestra la dirección del 
vínculo de cada area, lo que puede ser incomprensible. 

Jackie se beneficia. JAWS leerá el texto a1t de cada área del mapa de imágenes, 
en el orden en el que están definidos en su código fuente HTML. Jackie puede 
presionar ENTER para seguir el vínculo. Sin el texto alt, JAWS lee la dirección de 
cada área, lo que es casi seguramente incomprensible (Alguna vez ha intentado 
leerle una dirección de correo larga a alguien por el teléfono?). 

Lillian se beneficia. Internet Explorer muestra una información de herramienta 
sobre cada area con vínculos en el mapa de imágenes. 

Google se beneficia. El Googlebot clasifica el texto a1t de la imagen principal y de 
cada area dentro del mapa de imágenes. El texto a1t es un factor en la 
determinación la relevancia de su página con respecto a las palabras clave, y 
también la relevancia de cada vínculo con las palabras clave contenidas en texto alt 
del area. 


























Como hacerlo 


Si tiene un mapa de imágenes como este: 


<img src="footer.gif" width="500" height="212" usemap="+tMap"> 
g g 


<map name="Map"> 


<area 
<area 
<area 
<area 
<area 


shape="rect" coords="203,114,258,129" href="/archives.html"> 
shape="rect" coords="277,113,348,129" href="/category/"> 
shape="rect" coords="364,113,401,128" href="links.html"> 
shape="rect" coords="418,114,488,130" href="leslie.html"> 
shape="rect" coords="-4,190,131,210" 
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href="http://www.moveabletype.org"> 
</map> 


Añada texto alt a la imagen principal y a cada area vinculada del mapa de imágenes, 
como sigue: 


<img alt="Site navigation links" src="footer.gif" width="500" 
height="212" usemap="+Map"> 


<map name="Map"> 

<area alt="previously..." shape="rect" coords="203,114,258,129" 
href="/archives.html"> 

<area alt="by category" shape="rect" coords="277,113,348,129" 
href="/category/"> 

<area alt="about the site" shape="rect" coords="364,113,401,128" 
href="links.html"> 

<area alt="about leslie" shape="rect" coords="418,114,488,130" 
href="leslie.html"> 

<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" 
href="http://www.moveabletype.org"> 

</map> 








Todas las reglas acerca de la escritura de texto alt correcto para imágenes también aplican 
para los mapas de imágenes. También podría añadir title="" a la imagen principal y a 
cada <area> para suprimir la información de herramienta de los navegadores visuales. 


Cosas que no debe hacer 


No cree mapas de imágenes del lado del servidor, imágenes que pasan las coordenadas 
exactas de cada clic al servidor para procesamiento adicional. Son completamente 
inaccesibles a usuarios de JAWS como Jackie, usuarios de navegadores exclusivamente de 
texto como Michael y Marcus, usuarios que solo pueden usar el teclado como Bill, y 
buscadores como Google. Si debe usar obligatoriamente mapas de imágenes de servidor, 
añada una barra de navegación textual debajo de estos que incluya vínculos de texto real 
hacia cada página a la que pueda ir haciendo clic en el mapa de imágenes. 


Lectura añadida 


e Leslie Harpold: The Historical Present, sitio en inglés. Leslie generosamente me 
permitió usar su registro de apuntes como base de mi ejemplo de hoy. 
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Día 25: Usar reglas horizontales reales (o simularlas de 
manera correcta) 


Suponga que quiere una división entre sus apuntes. Las reglas horizontales regulares son 
aburridas, así que utiliza una imagen como alternativa. Esto funciona, y puede hacerse más 
accesible con la adición de un texto alt apropiado. 


Sin embargo, puede ir más allá y usar una regla horizontal real, y luego usar un pequeño 
truco de CSS para mostrarla como una imagen en los navegadores modernos. Los 
navegadores antiguos y textuales ignorarán el CSS y mostrarán solamente una regla 
horizontal en su estilo tradicional (Los navegadores de texto generalmente usan una fila de 
líneas de subrayado o de guiones, expandida al ancho actual de la pantalla). 


Les daré ejemplos de ambas técnicas en un instante. 
Quien se beneficia? 


1. Jackie se beneficia. Como ya hemos visto, JAWS lee el nombre de archivo de 
cualquier imagen sin un atributo alt. 

2. Marcus se beneficia. Lynx muestra el nombre se archivo de cualquier imagen que 
no tenga un atributo alt. Si usa una regla horizontal real, Lynx mostrará una serie 
de líneas de subrayado del ancho actual de la pantalla. 

3. Michael se beneficia. Links no muestra nada para imágenes sin texto alt, así que 
Michael no tiene ninguna indicación de que hay una división. Necesitamos ese texto 
alt, o aun mejor, una etiqueta <hr>, que Links mostrará como una serie de guiones 
del ancho actual de la pantalla. 


Como hacerlo 

Si usa imágenes para sus reglas horizontales, la manera mas fácil de hacerlas accesibles es 
añadirles un atributo a1t a su etiqueta de <img>. Debería añadir un atributo de title 
también, para suprimir la información de herramienta en los navegadores visuales. Así que 
si tiene esto: 

<img src="/images/fancyrule.gif" width="442" height="25"> 


Cámbielo a esto: 


<img alt="--" title="" src="/images/fancyrule.gif" width="442" 
height="25"> 


No se vuelva loco y especifique 80 guiones para el texto a1t. Dos o tres serán suficientes. 


Sumérjase en la Accesibilidad 59 


Como hacerlo: avanzado 


La técnica avanzada (y preferida) usa una etiqueta <hr>. Sin embargo, como el soporte de 
los navegadores para la estilización de las etiquetas <hr> es muy pobre, usaremos etiquetas 
<div> de señuelo para mostrar la imagen. Coloque el CSS siguiente en su sección <style> 
en la parte superior de su plantilla (Si está usando una hoja de estilos externa como style- 
sites.css, colóquelo en cualquier sitio dentro de esta. Si está usando múltiples hojas de 
estilos, colóquelo en la que sea amigable con el Netscape). 


div.hr (display: none) 
IAE 
div.hr ( 
display: block; 
height: 25px; 
background-image: url(/images/fancyrule.gif); 
background-repeat: no-repeat; 
background-position: center center; 
margin: lem 0 lem 0; 
) 
hr {display:none} 
LEAL 





(Para el height, sustituya el valor por el valor de la altura de su imagen. Para background- 
image, sustituya la dirección donde se encuentra su imagen). 


Luego en su plantilla, donde desea que esté su regla decorativa, inserte esto: 
<div class="hr"></div><hr /> 
Resultados: 
e Todos los navegadores modernos mostraran la imagen en lugar de la regla 
horizontal regular. 
e Netscape 4 mostrará la regla horizontal regular. 
e Los navegadores de texto siempre ignoran el CSS, así que mostrarán una regla 


horizontal regular (usualmente mostrada como una serie de líneas de subrayado o de 
guiones). 


Lectura añadida 
e CSS] y el HR Decorativo, si se siente lo suficientemente valiente y quiere decorar 


las reglas horizontales con CSS en Netscape 4. Mucha suerte con eso. Artículo en 
inglés. 
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Día 26: Usar tamaños de fuentes relativos 


Los sitios de Internet, con unas pocas excepciones, se centran palabras. Noticias, opiniones, 
pensamientos, ideas, historias, escritura original, e-commerce: todo en palabras. El diseño 
visual es importante, sin duda, pero si la gente no puede leer sus palabras, cual es el punto? 


En el otoño del 2000, Jeffrey Zeldman afirmó notoriamente que aplicar tamaño relativo a 
las fuentes era imposible ("pixels, cariño... o nada”) debido a una cantidad gigantesca de 
errores de los navegadores, comenzando con Netscape 4 y terminando en los navegadores 
mas modernos. Desde entonces, Netscape 4 todavía no ha mejorado, y todavía no se ha ido, 
pero al menos hemos aprendido uno o dos cosas acerca de amaestrar a los navegadores y 
hacer una realidad que se pueda aplicar tamaño relativo a las fuentes (Zeldman también; su 
reencarnado Web Standards Project usa la misma técnica descrita mas abajo). 


Use tamaños de fuente relativos en navegadores que puedan manejarlos, y tamaños 
absolutos en Netscape 4 que no soporta de manera eficiente los tamaños relativos. Puede 
hacer esto aun sin el uso de hojas de estilo múltiple. En instantes, les daré soluciones de 
copiar y pegar para la plantilla por defecto de Movable Type y para todos los temas por 
defecto de Radio. Y una larga explicación de la técnica en si para ayudarlo a implementarla 
en otras plantillas. 


Quien se beneficia? 


1. Lillian se beneficia. Lillian tiene dificultad para ver las páginas de Internet 
claramente, debido a nada más que a su edad. Como el 80% de la población de 
Internet, ella usa Internet Explorer para Windows, que no soporta el cambio de 
tamaño del texto a menos que el diseñador especifique exclusivamente tamaños de 
fuentes relativas. Lillian ha cambiado el tamaño de texto por defecto en su 
navegador (bajo el menú “Ver”, “Tamaño de texto”), pero esto no funciona en sitios 
que usan tamaños absolutos de fuentes. Esto incluye a prácticamente todas las 
plantillas de registros de apuntes en existencia. Por ejemplo, esta es la forma en que 
luce la plantilla por defecto de Movable Type para Lillian: 
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Si la plantilla usara tamaños relativos de fuentes, se vería exactamente igual para la 
mayoría de los lectores que no necesitan (o les importa) cambiar su tamaño de texto. 


Pero así se vería para Lillian: 


De nuevo: si la gente no puede leer sus palabras, cual es el punto? 
Como hacerlo: Radio 


En si Plantilla de Página de Inicio (Home Page Template), busca en la sección <style> 
cerca al tope por una regla de CSS que se vea como esta: 


body, td, th, p (1 
font-family: verdana, sans-serif; 
font-size: 12px; 


Déjela como está, pero añada esto inmediatamente después: 


1*/*1a1t) 
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body, 


body td, 

body th, 

body p { 
font-size: x-small; 
voice-family: "\"}\""; 





voice-family: inherit; 
font-size: small; 

} 

html>body, 

html>body td, 

html>body th 

html>body p { 
font-size: small; 

} 

PER] 





Asegúrese de incluir los comentarios al principio y al final. Son la clave de todo el asunto, 


como se explica mas abajo. 


Como hacerlo: Movable Type 


La plantilla por defecto de Movable Type es más complicada que las plantillas de Radio, 


pero vamos a hacer justamente los mismo, pero con mas código. En su plantilla Stylesheet 


(styles-site.css), añada esto al final: 


TELA EAI 

body, 

body a, 

body .calendar, 

body .calendarhead, 

body .title, 

body .sidetitle, 

body .syndicate, 

body .powered, 

body .comments-post, 

body .posted { 
font-size: xx-small; 
voice-family: "\"}\""; 
voice-family: inherit; 
font-size: x-small; 

} 

html>body, 

html>body a, 

html>body .calendar, 

html>body .calendarhead, 

html>body .title, 

html>body .sidetitle, 

html>body .syndicate, 

html>body .powered, 

html>body .comments-post, 

html>body .posted { 
font-size: x-small; 
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body .date { 
font-size: x-small; 
voice-family: "\"}\""; 
voice-family: inherit; 
font-size: small; 








) 
html>body .date ( 
font-size: small; 


} 











body #banner { 
font-size: 200%; 


} 


body .description { 
font-size: 60%; 


} 


body .blogbody { 
font-size: 110%; 


} 


body .blogbody, 

body .calendar, 

body .calendarhead, 

body .side, 

body .title, 

body .sidetitle, 

body .syndicate, 

body .powered, 

body .comments-body ( 
line-height: 128%; 

} 

pE 





De nuevo asegúrese de incluir los comentarios al principio y al final. 
Como hacerlo: explicación detallada 


La idea general es que vamos a utilizar palabras claves de tamaño de fuente (font-size). 
Estas se usan muy poco (debido a errores en navegadores antiguos), pero tienen 
propiedades interesantes: 


1. No se multiplican. Si tiene una sección “principal” con tamaño de 90%, y dentro 
tiene una sección "apuntes" con tamaño de 90%, algunos navegadores mostrarán el 
apunte a 81% (90% x 90%), pero algunos los mostraran a 90%. Con más de un nivel 
anidado (común en las plantillas que usan tablas para la disposición), el texto se 
vuelve rápidamente ilegible a medida que los tamaños se combinan. Sin embargo, si 
su sección "main" tiene un tamaño de sma11, y la sección de "apuntes" dentro de 
esta tiene un tamaño de sma11, todos los navegadores mostraran el texto de la 
sección "apuntes" como small. 
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2. Pueden aumentar o reducir su tamaño apropiadamente en Internet Explorer para 
Windows. Esto es extraño, ya que sma11 suena como un valor absoluto 
(especialmente en luz de que sma11 anidado dentro de otro smal11 aun es smal1, vea 
arriba), pero funciona. Que puedo decirle? IE/Win cambia de tamaño con palabras 
claves para fuentes. Lo juro. 

3. Nunca se ponen demasiado pequeñas. Esa opción de "Tamaño de texto" que usa 
Lillian en Internet Explorer puede usarse para hacer que el texto se ponga más 
pequeño así como más grande. Mucha gente con buena visión prefiere que todo se 
vea una, y hasta dos veces, menores que lo normal. El texto con tamaño establecido 
en porcentajes tiende a volverse microscópico y borroso cuando se combina con el 
tamaño más pequeño por defecto. Sin embargo, el texto cuyo tamaño es establecido 
por medio de palabras claves siempre se mantiene al menos en 9px lo que es legible 
en cualquier fuente (asumiendo que se tiene buena visión). 


Así que vamos a usar palabras claves para especificar nuestros tamaños básicos. Y si 
necesitásemos controles mas precisos que esos, usaremos porcentajes, pero solamente en 
clases de páginas que contengan texto (por lo tanto sí en “apuntes”, pero no en “principal”, 
para evitar la combinación de porcentajes, no demasiado pequeños, para evitar que se 
vuelvan microscópicos al combinarse con los tamaños pequeños que usan los usuarios por 
defecto. 


He aquí la idea general de las palabras clave de tamaño de fuentes: 


pii 
font-size: 12px; 

} 

/*/*/a{} 

body p { 
font-size: x-small; 
voice-family: "\"}\""; 





voice-family: inherit; 
font-size: small; 





} 
html>body p { 
font-size: small; 











} 
15 E) 


Hay muchas cosas en acción aquí, y todas son importantes, así que preste atención. 


1. Primero, estamos definiendo un tamaño absoluto (12px) para cada <p>. Todos los 
navegadores aplican este estilo, incluyendo Netscape 4. 

2. Luego incluimos el extraño comentario "/*/*/". Debido a errores en el Netscape 4, 
todo lo que está entre este comentario y el siguiente será ignorado. Así es, todos los 
siguientes estilos se aplicaran solamente a los navegadores que no son Netscape-4. 

3. Inmediatamente después del comentario extraño, incluimos una regla vacía "a []". 
Opera 5 para Mac también tiene errores e ignora esta regla (solamente esta regla). 
Todo lo demás le aplica. 
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4. Hemos hecho un reino en el cual podemos definir reglas que aplican a todos los 
navegadores a excepción del Netscape 4. Ahora podemos comenzar a definir 
tamaños de fuentes relativos (que Netscape 4 no puede manejar). Lo primero que 
hay que hacer es usar un selector "body p" para redefinir la conducta de la etiqueta 
p. Debido a la forma en que funcionan las CSS, esto anulará a nuestro selector p 
previo. (En términos técnicos, "body p" es un selector más especifico que "p".) 

5. Redefinimos el tamaño de fuente para todas las etiquetas <p> al valor de x-sma11. 
Esta es una palabra clave cuyo tamaño, de acuerdo a sus ajustes por defecto, 
Internet Explorer 5 para Windows traducirá a 12px. Sin embargo, si el usuario 
cambia su "Tamaño de texto" (bajo el menú Ver), este texto aumentará o reducirá su 
escala, dependiendo en el ajuste del usuario. Esto es lo que queremos (Nota: hemos 
definido dos veces un valor para el tamaño de la fuente (font-size) para IES/Win, 
pero está bien, porque el selector más específico prevalece siempre, y el selector 
previo es simplemente ignorado). 

6. Desafortunadamente, IES/Win tiene las palabras claves desequilibradas por un 
valor; todos los demás navegadores del mundo (IES/Mac, Netscape 6, Mozilla, 
IE6/Win) traducirán x-sma11 a 10px, y no 12px. Afortunadamente, IES5/Win tiene 
su propio error de análisis gramatical que podemos explotar: cuando analiza ese 
extraño argumento de voice-family, piensa de manera errónea que el selector "body 
p" se terminó, y por esto ignora todas las líneas hasta la ")". 

7. Ahora hemos fabricado un reino más pequeño en el cual podemos definir reglas que 
aplican a todos los navegadores a excepción del IES5/Win (y el Netscape 4, que 
todavía ignora todo esto). Así que redefinimos el tamaño de la fuente (font-size) a 
sma11, que los navegadores modernos que no son IES5/Win (los únicos que siguen 
escuchando) interpretan correctamente como 12px (de acuerdo a los ajustes por 
defecto). Otra vez, si el usuario ajusta su "tamaño de texto" a un tamaño mayor, este 
texto aumentará su escala, que es lo que queremos. 

8. Pero espere! Opera 5 tiene el mismo error de análisis gramatical que tiene IES/Win, 
así que también se confundió con el artificio del voice-family, pero interpreta 
correctamente los tamaños de las palabras clave, así que ahora nuestro texto se verá 
demasiado pequeño en Opera 5. Afortunadamente, Opera 3 soporta un tercer tipo de 
selector, "html>body p". (Nuevamente, este es “mas especifico” que "body p", así 
que toma precedencia sobre el selector previo). IES/Win no soporta este tipo de 
selector, así que simplemente lo ignorará, que es lo que queremos (ya que hemos 
compensado por su error de menos uno al tamaño de las fuentes y no queremos 
echar eso a perder ahora). IE6/Win tampoco lo soporta, pero eso esta bien, porque 
lo atrapamos con el "font-size: small" luego del artificio "voice-family: inherit" en 
el selector "body p". todos los otros navegadores soportan "html>body” selectors, 
así que para ellos terminaremos definiendo el tamaño de fuente (font-size) cuatro 
veces. Reiteradamente, esto no es un problema, porque el selector mas especifico 
prevalece siempre, y el resto es simplemente ignorado. 

9. Finalmente, hemos puesto un conjunto de comentarios vacíos: /* */. Esto hace que 
el analizador gramatical del Netscape 4 vuelva a escuchar por nueva vez. Si 
definiéramos cualquier otra regla después de estos comentarios vacíos, todos los 
navegadores (incluyendo Netscape 4) la aplicarían. 
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Para recapitular: 


1. 


2. 


Netscape 4 muestra el texto de <p> con tamaño de 12px, sin importar los ajustes del 
usuario. 

Internet Explorer 5 para Windows muestra el texto de <p> con tamaño x-sma11, lo 
que es equivalente a 12px con los ajustes por defecto, pero aumentaría la escala si el 
usuario ajustara su "Tamaño de texto" a un tamaño mayor en el menú Ver. 

Internet Explorer 6 para Windows muestra el texto de <p> con tamaño sma11, 
debido a la regla "font-size: small" en el selector "body p". Esto equivale a 12px con 
los ajustes por defecto, pero aumentaría la escala si el usuario ajustara su "Tamaño 
de texto" a un tamaño mayor. 

Internet Explorer 3 para Mac, Opera, Netscape 6, Mozilla, y (con optimismo) todos 
los navegadores futuros mostraran el texto de <p> con tamaño sma11, debido a la 
regla "font-size: small" en el selector "html>body p". Esto equivale a 12px con los 
ajustes por defecto, pero aumentaría la escala si el usuario ajustara su función de 
"Text Zoom". 


Lectura añadida 


Mark Pilgrim: Relative Font Sizing HOWTO. Brinda esencialmente la misma 
explicación, pero la página misma es un ejemplo de la técnica, para que pueda verla 
en acción, artículo en inglés. 

Todd Fahrner: El Tamaño Importa: Hacer que Funcionen Los Tamaños de Fuentes 
Relativas, artículo en inglés. 

Caio Chassot: Esconder CSS del Netscape 4 sin usar múltiples hojas de estilo, 
artículo en inglés. 

Tantek Çelik: Box Model Hack. Como esconder CSS del Internet Explorer 5 para 
Windows, artículo en inglés. 

The Web Standards Project también usa palabras clave con el artificio para 
IE5/Win, aunque usan una solución basada JavaScript (en lugar del artificio de los 
comentarios) para lidiar con Netscape 4, artículo en inglés. 

Owen Briggs: Text Sizing. Imágenes de varias técnicas de cambio de tamaño de 
fuentes relativas a través de diversos navegadores, plataformas, y ajustes de tamaño 
de texto por defecto, artículo en inglés. 
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Día 27: Usar encabezados reales 


Piense en su sitio de Internet como un esquema. El nivel superior es rotulado de acuerdo al 
nombre de su sitio. En su página de inicio, enlista entradas de varios días. Así que el 
segundo nivel es rotulado por sus descripciones de cada fecha: “Martes, 16 de Julio, 2002”, 
o algo similar. En cada día, hace múltiples apuntes, que puede que tengan su propio titulo. 
Si es así, entonces tiene un tercer nivel, rotulado por los títulos de los apuntes individuales. 


Ahora marque su sitio de Internet como un esquema, usando etiquetas de encabezados 
reales <h1>, <h2>, <h3>. Los lectores de pantalla dependen de estas etiquetas para 
interpretar la estructura de sus páginas. Sus páginas tienen una estructura, pero sin las 
etiquetas de encabezados correctas, los lectores de pantalla no pueden encontrarla. En 
instantes, les mostraré como usar CSS para hacer que sus encabezados se vean iguales en 
los navegadores visuales con cualquier, monstruosidad basada en la etiqueta <font> que 
esté usando actualmente. 


Quien se beneficia? 


1. Jackie se beneficia. Tan pronto como Jackie llega a su página, JAWS anuncia que 
tiene un cierto número de vínculos y de encabezados. Jackie puede teclear 
INSERT+F6 para escuchar todos los encabezados de su página, o 
CTRL+INSERT+ENTER para navegar rápidamente a través de su página saltando de 
encabezado a encabezado. 

2. Michael se beneficia. En Opera, puede usar la tecla s para saltar al próximo 
encabezado, o la tecla w para saltar al anterior. 

3. Google se beneficia. Google aprecia una página bien estructurada, y evalúa de 
manera más alta las palabras clave cuando aparecen en encabezados reales (Otra 
razón más para escribir títulos de apuntes bien formados). 




















Como hacerlo: Movable Type 


1. Defina los estilos para el logo de si sitio. En su plantilla Stylesheet (styles- 
sites .css), añada las siguientes líneas: 


h1, h2, h3 ( 
margin: 0; 
padding: 0; 
} 


h1 { 
font-size: 20px; 
font-weight: normal; 


} 
/*/*/a4) 


h1 (font-size: 100%) 
[RE] 
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2. Defina el logo de su sitio usando una etiqueta <h1>. En sus 4 plantillas principales 
(Main Index, Category Archive, Date-Based Archive, Individual Entry Archive), 
busque esto: 


<div id="banner"> 
<$MIBlogName$><br /> 


Y reemplácelo por esto: 


<div id="banner"> 
<h1><$MTBl1ogName$></h1> 


3. Defina sus encabezados de fecha usando etiquetas <h2>. Ya hemos definido una 
clase para estas, así que no necesitaremos hacer ningún cambio en la hoja de estilos; 
silo cambiaremos la etiqueta. En sus 4 plantillas principales, busque esto: 


<div class="date"> 
<$MTEntryDate format="SB %d, SY"S> 
</div> 





Y reemplácelo con esto: 


<h2 class="date"> 
<S$MTEntryDate format="%B $d, SY"$> 
</n2> 





4. Defina los títulos de sus apuntes usando etiquetas <h3>. Nuevamente, esto involucra 
solo el cambio de la etiqueta, no la hoja de estilos. En sus 4 plantillas principales, 
busque esto: 





<span class="title"><$MTEntryTitle$></span> 
Y reemplácelo con esto: 


<h3 class="title"><$MTEntryTitle$></h3> 





Como hacerlo: Radio 


1. Defina sus estilos de encabezado. Los temas por defecto de Radio no usan etiquetas 
de encabezados reales, así que necesitaremos modificar estos estilos manualmente 
(Ajustados para esto, pero estos ejemplos deben hacer que su página se vea igual 
que como se veía antes en los navegadores visuales). 


Concretamente, antes de comenzar, busque "n2 (" en su Plantilla de Página de 
Inicio (Home Page Template). Si encuentra una regla como esta, quítela; realmente 
no es usada en ningún sitio, y se interpondrá en nuestro camino: 


h2 { 
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 
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24px; font-weight: bold 
} 


2. OK, ahora añada estos estilos, en cualquier lugar dentro de la sección <style> de su 
Plantilla de Página de Inicio (Home Page Template): 


hl, h2 { 
margin: 0; 
padding: 0; 
} 


h1 {font-size: 24px} 
h2 {font-size: 13px} 


1*/*1a1) 

h1 ( 
font-size: large; 
voice-family: "\"}\""; 





voice-family: inherit; 
font-size: x-large; 

) 

html>body h1 ( 
font-size: x-large; 


) 





h2 ( 
font-size: x-small; 
voice-family: "\"}\""; 





voice-family: inherit; 
font-size: small; 





) 
html>body h2 ( 
font-size: small; 


) 











pl 


Note que estamos usando tamaños de fuentes relativos para nuestros encabezados 
en navegadores que soportan tamaños relativos, y tamaños absolutos en Netscape 4. 
Esta técnica debe serle familiar; hicimos lo mismo ayer. 


3. Defina el encabezado para el nombre de su sitio. En su Plantilla de Página de Inicio 
(Home Page Template), busque "<%siteNames>" y encuentre una línea que se vea 
como esta: 


<font size="+2"><b><a href="<S$radio.macros.weblogUrl ()%>" 
style="color:Black; text- 
decoration:none"><%siteNames></a></b></font> 


Y cámbiela a esta: 


<hl><a href="<S$radio.macros.weblogUrl1 ()%>" style="color:Black; 
text-decoration:none"><%siteNames></a></h1> 
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4. Defina el encabezado para sus encabezados de fecha. En su Plantilla de Día (Day 
Template), busque "<%1ongDates>" y encuentre una línea como esta: 


<b><$longDates></b> 

Y cámbiela por esta: 

<h2><%longDates$></h2> 
Lectura añadida 


e Shirley Kaiser: No Simule Su marcaje (Don't Fake Your Markup): Asuntos de 
Accesibilidad de CSS, artículo en inglés. 
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Día 28: Designar los elementos de los formularios 


Le ha molestado alguna vez que los formularios de Internet sean tan difíciles de usar? Por 
ejemplo, en aplicaciones con interfaz grafico normales, puede hacer clic donde quiera en la 
etiqueta de un cajita de selección (checkbox) para poner o quitar la marca de la cajita, pero 
en las aplicaciones de Internet, solo puede hacer clic en el pequeño cuadrado de la cajita. 
Esto es irritante pero no fatal. Pero para usuarios ciegos, la situación es aun peor. Hasta 
formularios sencillos, como aquellos usados para publicar comentarios, pueden ser difíciles 
de usar si no los puede ver en su totalidad (Notamos un problema similar con las tablas; un 
calendario de un registro de apuntes es fácil de usar si puede verlo completamente, pero 
difícil si solo puede ver un día a la vez). 


Existen etiquetas de HTML que pueden ayudar a hacer los formularios más fáciles de usar. 
Hablare sobre una, la etiqueta <1abe1>; puede leer sobre las otras en la sección “Lectura 
añadida”. 


La etiqueta <1abe1> permite asociar una etiqueta de formulario con cualquier elemento de 
entrada de datos: una caja de texto, un area de texto de múltiples líneas, un cajita de 
selección (checkbox), un botón de radio, lo que sea. Esto permite a los usuarios de lectores 
de pantalla inteligentemente anunciar lo que es un elemento de entrada en particular, por 
medio de la lectura de la etiqueta. Mas aún, si usa una etiqueta <labe1> para asociar una 
cajita de selección (<input type="checkbox">) con el elemento de texto junto a esta, su 
formulario de Internet, se comportará como una aplicación con interfaz grafico: al hacer 
clic en cualquier sitio de la etiqueta marcará o desmarcará la cajita. 


Quien se beneficia? 


1. Jackie se beneficia. Cuando Jackie navega con la tecla TAB a través de un 
formulario, JAWS anuncia el nombre de cada elemento (por la propiedad name), 
que podría o no ser inteligible. Pero si el elemento del formulario está asociado con 
una etiqueta, JAWS leerá la dicha etiqueta en su lugar. "Texto: nombre." (TAB) 
"Texto: dirección de email." (TAB) "Text: URL." (TAB) "Area de texto: 
comentarios." Y así en adelante. 

2. Lillian se beneficia. Cuando los elementos de formulario son asociados con 
etiquetas, Lillian puede hacer clic en cualquier sitio del texto junto a la cajita de 
selección, y esto cambiará el estado de la cajita. Esto ofrece una margen de error 
mas amplio para cambiar la cajita con el Mouse, y con su visión limitada, mientras 
mas ancho mejor. 

3. Bill debería beneficiarse, pero todavía no puede. El navega en su mayor parte con el 
teclado, lo que significa en su mayoría con la tecla TAB. Cuando llega a una cajita de 
selección en un formulario, Mozilla debería establecer un rectángulo de enfoque 
alrededor de la etiqueta completa, pero no lo hace así, solo coloca el rectángulo 
alrededor de la cajita (Sin embargo, Internet Explorer lo hace correctamente. Hasta 
Netscape 4 lo hace correctamente. Mozilla malo). 
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Como hacerlo: Movable Type 


En Movable Type, edite su Plantilla de Inscripción de Comentarios (Comment Listing 
Template). Cerca del final, deberá ver un formulario que contiene elementos como estos: 


Nombre :<br /> 
<input name="autor" /><br /><br /> 


Email:<br /> 
<input name="email" /><br /><br /> 





Dirección de su página de internet:<br /> 
<input name="url" /><br /><br /> 


Comentarios:<br /> 
<textarea name="texto" rows="10" cols="50"></textarea><br /><br /> 


<input type="checkbox" name="bakecookie" />Recordar esta información?<br 
/><br /> 


Cada una de estas etiquetas necesita ser envuelta en una etiqueta <1abe1>. También, como 
la etiqueta <1abe1> señala hacia un elemento de formulario por ID (no por el nombre — 
name), cada etiqueta <input> necesita un atributo ID. En su totalidad, se verá así: 


<label for="autor">Nombre:</label><br /> 
<input id="autor" name="autor" /><br /><br /> 


<label for="email">Email:</label><br /> 
<input id="email" name="email" /><br /><br /> 


<label for="url"> Dirección de su página de internet:</label><br /> 
<input id="url" name="url" /><br /><br /> 


<label for="text">Comentarios:</label><br /> 
<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br 


/> 


<input type="checkbox" id="bakecookie" name="bakecookie" /><label 
for="bakecookie">Recordar esta información?</label><br /><br /> 


Asegúrese de hacer los mismos cambios en su plantilla de Revisión de Comentarios 
(Comment Preview template), su plantilla de Error de Comentarios (Comment Error 
template), y su Archivo de Entrada Individual (Individual Entry Archive). 


Como hacerlo: Greymatter 


Bajo "Edit Karma € Comments-Related Templates", debe haber una plantilla llamada 
"((entrycommentsformj]) Posting form" que incluye lo siguiente: 


Nombre 
<BR> 
<INPUT TYPE= 





EXT NAME="newcommentauthor" SIZE=40> 





H 
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<P> 
































NAME="newcommentemail" SIZE=40> 





E-Mail (opcional) 
<BR> 

<INPUT TYPE=TEX71 
<P> 

Página de Internet 
<BR> 

<INPUT TYPE=TEXT 
<P> 

Comentarios 

<BR> 

<TEXTAR 


























Cámbielo a esto: 





NAME="newcommenthomepage" SIZE=40> 


EA NAME="newcommentbody" 


(opcional) 





<label for="newcommentauthor">Nombre</label> 


<BR> 





<INPUT 
<P> 
<label 
<BR> 








COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA> 














TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40> 











for="newcommentemail">E-Mail (opcional)</label> 





<INPUT 
<P> 
<label 
<BR> 


TYPE= 





H 














EXT id="newcommentemail" NAME="newcommentemail" SIZE=40> 


for="newcommenthomepage">Página de Internet (opcional)</label> 





<INPUT 
SIZE=40 
<P> 





TYPE= 
> 





H 








EXT id="newcommenthomepage" NAM 





<label for="newcommentbody">Comentarios</label> 


<BR> 








<TEXTAR 





WRAP=VI 


EA id="newcommentbody" NAM 











RIUAL></T 


EXTAR 








EA> 





Lectura añadida 


E="newcommentbody" 


E="newcommenthomepage" 


COLS=35 ROWS=10 


e WebAIM: Como Crear Formularios Accesibles (Create Accessible Forms), artículo 


en inglés. Para formularios más complejos, etiquetas adicionales relacionadas con 
accesibilidad como son <legend> y <fieldset> podrían requerirse. Este tutorial le 
muestra para que sirven y como usarlas. 
e  W3C: Formularios en Documentos HTML: El elemento LABEL (Forms in HTML 
Documents: The LABEL element). 
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Día 29: Hacer que todo pueda buscarse 


Todo sitio de Internet necesita un buscador interno. Punto. 
Reglas para un buen buscador de sitio: 


1. Ponga la barra de búsqueda en cada página, preferiblemente visible al entrar a la 
página. 

2. Busque todo por defecto. Si tiene una opción para buscar entradas, comentarios, o 
ambos, haga que “ambos” sea la opción por defecto. 

3. No abarrote su barra de búsqueda con opciones avanzadas, como lógica booleana, 
sensitividad a mayúsculas, o expresiones regulares. Elija opciones por defecto que 
imiten la conducta de Google (todas las palabras, no igualar palabras parciales, no 
igualar mayúsculas o minúsculas, no usar expresiones regulares) y ponga todas estas 
opciones visibles en una página separada de búsqueda avanzada. 

4. Otorgue a su barra de búsqueda una etiqueta apropiada y una tecla de acceso. 
Recomiendo usar accesskey="4". (Nota: El día 15, ofrecí un ejemplo de cómo 
asignar una tecla de acceso (accesskey) a su formulario de búsqueda, y me 
equivoqué. Para compatibilidad máxima entre navegadores, necesita definir la tecla 
de acceso en la etiqueta <labe1>, no en la etiqueta <input>. Vea los ejemplos 
siguientes para corregir la sintaxis.) 





Quien se beneficia? 


Jackie, Michael, Bill, Lillian, Marcus, y casi todo el mundo se benefician de una búsqueda 
en su sitio correctamente implementada. Especialmente en un registro de apuntes o en un 
sitio orientado a noticias, donde el contenido es organizado principalmente de manera 
cronológica, es muy frustrante tratar de encontrar una publicación especifica que no se 
encuentra en la página principal. Muy pocas personas saben acerca de la sintaxis 
"site:domainname.com" en Google (para restringir los resultados de búsqueda a un dominio 
en particular, y Google reclasifica solo una vez al mes. Provea su propia búsqueda en su 
sitio. 





Como hacerlo 


Greymatter tiene funcionalidad de búsqueda incluida, pero necesita personalizar la plantilla 
ligeramente para proveer una tecla de acceso para la barra de búsqueda. Vaya a "Edit 
Templates", "Miscellaneous Templates", "Search Form Template", y encuentre un 
formulario como este: 





<FORM ACTION=" {{cgiwebpath}}/gm-comments.cgi" METHOD=POST> 
<INPUT TYPE=TEXT NAME="gmsearch" SIZE=20> 

<INPUT TYPE=SUBMIT VALUE="Search"> 

</FORM> 



































Y cámbielo a esto: 
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<FORM ACTION="((cgiwebpath))/gm-comments.cgi" METHOD=POST> 
<label for="gmsearch" accesskey="4">Search for:</label> 
<INPUT TYPE=TEXT id="gmsearch" NAME="gmsearch" SIZE=20> 
<INPUT TYPE=SUBMIT VALUE="Search"> 

</FORM> 



































Los usuarios de Movable Type pueden probar la extensión MT-Search. Voy a usar esta 
extensión en un sitio próximo que usará Movable Type. Lo probé en mí registro de apuntes 
principal (que contiene más de 900) y fue bastante lento, pero parece funcionar bien en 
sitios más pequeños. Ya no está siendo desarrollado activamente, pero funciona bien, hasta 
en la última versión de Movable Type (Nota: si está usando la versión MySQL de Movable 
Type 2.2, necesita modificar ligeramente mt-search.cgi ). 





Si tiene un registro de apuntes con su propio nombre de dominio, tiene que usar un servicio 
de búsqueda de terceros que clasifique su contenido y provea resultados de búsqueda al 
pedido. Alternativas populares de este tipo incluyen Atomz Express Search, que es el que 
recomienda Blogger.com, y Google Free Web Search, el que uso en mi propio registro de 
apuntes. Ambos permiten cambiar el aspecto de su barra de búsqueda: mí formulario de 
búsqueda de Google se ve así (note el uso de la etiqueta <1abe1> y de accesskey): 


<form id="searchform" method="get" action="http://www.google.com/custom"> 
<p id="searchlabel"><label for="q" accesskey="4">Search this 
site:</label></p> 

<p id="searchinput"><input type="text" id="q" name="q" size="18" 
maxlength="255" value=" " /></p> 

<p id="searchsubmit"><input type="submit" value="Search" /> 

<input type="hidden" name="cof" 
value="LW:116;L:http://diveintomark.org/images/eyes.jpg;LH:68;AH:left;GL: 
0;S:http://diveintomark.org/;AWFID:0d8ffcebe359c844;" /> 

<input type="hidden" name="domains" value="diveintomark.org" /> 

<input type="hidden" name="sitesearch" value="diveintomark.org" /> 

</p> 

</form> 


Nota: no puede copiar y pegar esto en su propio registro de apuntes. Si quiere usar su 
propia Búsqueda Gratis de Google, necesitará registrarse y obtener su propio código que va 
en el campo invisible cof. 


Lectura añadida 


e Jay Allen: MT-Search, una extensión de búsqueda para Movable Type. 
e Phil Ringnalda: mt-search.cgi y MySQL, artículo en inglés. Información importante 
para hacer funcionar Movable Type 2.2 y MySQL. 


e Atomz Express Search, sitio en inglés. 
e Búsqueda Gratis de Google, sitio en inglés. 


e Blogger.com: Como agrego un buscador a mi registro de apuntes? 

e Jukka Korpela: Mejorar la accesibilidad con accesskey en formularios y vínculos 
de HTML, artículo en inglés. Cerca del final, explica porque usar el número 4 como 
la tecla de acceso hacia su buscador interno. 
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e Jakob Nielsen: Es Util la Navegación?”, artículo en inglés. Los usuarios 
frecuentemente se valen de la búsqueda como estrategia de caza. 

e Jakob Nielsen: Utilidad de la búsqueda, artículo en inglés. 5 años de edad y todavía 
increíblemente relevante. 

e PHP.net: URL HOWTO. PHP.net tiene el buscador interno más increíble que he 
visto. Además de la barra de búsqueda estándar, usan documentos de error 404 
personalizados (lo que usualmente arrojaría un error de “página no encontrada”) 
para buscar el sitio inteligentemente basado en el URL. Así, que puede introducir 
una dirección como php.net/phpinfo en la barra de búsqueda, y php.net lo re- 
direccionará hacia la página de referencia sobre la función phpinfo. 
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Día 30: Crear una declaración de accesibilidad 


Si ha implementado cualquiera de los consejos de esta serie, elabore un estatuto de 
accesibilidad que enliste las características de accesibilidad de su sitio. 


Quien se beneficia? 


1. Bill se beneficia. El hace uso extensivo del teclado para la navegación, y usaría sus 
teclas de acceso directo del teclado si supiera donde están. Desafortunadamente, 
Mozilla no los anuncia ni los hace visibles en forma alguna, así que necesitará 
enlistarlos usted. 

2. Muchos otros usuarios se benefician, al aprender como usar mejor sus propias 
aplicaciones. Por ejemplo, Lillian no sabia que podía ajustar el tamaño por defecto 
de su texto hasta que alguien no le dijo como hacerlo; ahora puede leer su sitio de 
Internet mas fácilmente (eso es, si usa tamaños relativos de fuentes). Los usuarios 
de Netscape y Mozilla podrían no saber que pueden activar la Barra de Navegación 
de Sitios para aprovechar sus ayudas de navegación basadas en LINK (Menú "Ver", 
"Mostrar/ocultar", "Barra de Navegación de Sitios", "Mostrar Solamente Según 
SEA Necesario”. Desafortunadamente, esta característica se quito de la versión final 
de Mozilla 1.0 a último minuto, pero volvió en la versión 1.1.) 

3. Se benefician los colegas diseñadores de Internet, al aprender mas acerca de 
accesibilidad y al ver que se ha tomado el tiempo en implementar estos cambios. 











Como hacerlo 


En Radio o Manila, puede crear una declaración de accesibilidad como una historia 
("Stories" en la barra de herramientas de Radio o Manila) para que tenga su propia 
dirección. De otro modo, solo tiene que crear un nuevo apunte. Haga una nota de la 
dirección luego de grabar; lo necesitará luego. 


Lo primero que debe hacer es un listado de las teclas de acceso directo del teclado que ha 
definido, ya que la mayoría de los navegadores no las anuncian ni las hacen visibles en 
alguna forma. También liste la accesskey para su declaración de accesibilidad (que 
debería ser accesskey="0", como veremos en un minuto). 


Después de eso, debe enlistar todas las características de accesibilidad que ha 
implementado a lo largo de esta serie. Si ha implementado algunos consejos y pero no 
otros, solo mencione los que ha implementado actualmente. Esto probablemente será una 
experiencia gratificante, como actualizar su currículo por primera vez desde que tomo un 
nuevo empleo y darse cuenta de cuantas cosas a hecho en realidad. Ha hecho mucho. 


Si lo desea, puede mencionar brevemente porque implementó cada característica ("más 
fácil de usar con los lectores de pantalla", "para usuarios de navegadores de texto", "para 
usuarios que no pueden distinguir los colores", y así en adelante). Recuerde, una 


declaración de accesibilidad, no será leído solamente por los usuarios discapacitados, debe 
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ser informativo (para usuarios que se benefician directamente) y educativo (para colegas 
diseñadores que quieran seguir su ejemplo). O, en vez, de explicarles usted, puede hacer 
vínculos a días individuales de este libro, o simplemente vincular a la página inicial del 
libro. 


Finalmente, vincule su declaración de accesibilidad a cada página de su sitio de Internet, 
ya sea por medio de un vínculo en su barra de navegación global o en el pie de página. 
Póngale al vínculo un titulo y un accesskey="0", así: 


<a href="/accessibility_statement.html" title="accessibility features of 
this site" accesskey="0">Accessibility statement</a> 


Lectura añadida 


e Declaración de accesibilidad de diveintomark.org. 

e Declaración de accesibilidad para diveintoaccessibility.org. Siéntase libre de usar 
esto ya sea como una plantilla, incluyendo la estructura, la redacción, y los vínculos 
a la lectura añadida. 
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Conclusión 


Esto ha sido "Sumérjase en la Accesibilidad: A 30 días de un sitio de Internet más 
accesible". De parte de Jackie, Michael, Bill, Lillian, y Marcus, gracias por su atención. 





Lectura añadida: libros que recomiendo 


1. Joe Clark: Building Accessible Websites, artículo en inglés. Fui el editor técnico de 
este libro; es excelente. Extenso pero no abrumador. 

2. Jim Thatcher y otros: Construir Sitios de Internet Accesibles, artículo en inglés. No 
tan extenso como el libro anterior; pero explica mas a fondo los tópicos que abarca. 
Ofrece imágenes de cómo los diversos lectores de pantalla y navegadores 
alternativos interpretan las diversas etiquetas y el marcaje. También contiene un 
capitulo maravilloso sobre el estado legal actual de los requisitos de accesibilidad. 

3. Steve Krug: Don't Make Me Think: A Common Sense Approach to Web Usability, 
artículo en inglés. Utilidad y accesibilidad se superponen de muchas formas. Steve 
ofrece muchos buenos consejos acerca de navegación útil (y accesible). 

4. Owen Briggs, Steve Champeon, Eric Costello, Matthew Patterson: Cascading Style 
Sheets: Separating Content from Presentation, artículo en inglés. Como hemos a lo 
largo de esta serie, CSS es una parte esencial de la accesibilidad, porque permite 
“hacer las cosas correctamente” en su marcaje HTML (y esto le importa a las 
tecnologías de asistencia) y mostrar sus páginas de la manera en que los desea en 
los navegadores visuales. 


5. Eric Meyer: Eric Meyer on CSS: Mastering the Language of Web Design, artículo 
en inglés. También hay material gratis en el sitio de Internet del libro. 











Sumérjase en la Accesibilidad 80 


Declaración de Accesibilidad 


Esta es la declaración oficial para Sumérjase en la Accesibilidad. Si tiene cualquier 
pregunta o comentario, siéntase libre de contactarme en la dirección de correo electrónico 


feedback Odiveintoaccessibility.org. 
Teclas de acceso 


La mayoría de los navegadores soportan saltar a vínculos específicos al presionar teclas 
definidas en el sitio de Internet. En Windows, puede presionar ALT + una tecla de acceso; 
en Macintosh, puede presionar Control + una tecla de acceso. 


Todas las páginas de este sitio definen las siguientes teclas de acceso: 


e Tecla de acceso 1 - Página de Inicio 

e Tecla de acceso 3 - Indice 

e Tecla de acceso 4 - Búsqueda 

e Tecla de acceso 8 - Términos de uso 

e Tecla de acceso 9 - Contacto 

e Tecla de acceso O — Declaración de Accesibilidad 


Conformidad con los estándares 


1. Todas las páginas de este sitio están aprobadas por Bobby AAA, y están en 
conformidad con todas las pautas de Bobby. Esto siempre está sujeto a subjetividad; 
muchas características de accesibilidad pueden medirse, pero muchas otras no. He 
revisado todas las pautas y creo que todas estas páginas están en conformidad. 

2. Todas las páginas de este sitio están aprobadas por WCAG AAA, conforme a todas 
las pautas con prioridad 1, 2, y 3 de las Pautas para Accesibilidad de Contenido de 
Internet de la W3C. Nuevamente, esto está sujeto a subjetividad; muchas pautas son 
intencionalmente vagas y no pueden probarse automáticamente. He revisado todas 
las pautas y creo que todas estas páginas están en conformidad. 

3. Todas las páginas de este sitio están aprobadas por la Sección 508, conforme con 
todas las pautas de la Sección 508 del Gobierno Federal de los EU. Nuevamente, 
esto está sujeto a subjetividad. He revisado todas las pautas y creo que todas estas 
páginas están en conformidad. 

4. Todas las páginas de este sitio validan como XHTML 1.0 Strict. Esto no está sujeto 
a subjetividad; un programa puede determinar con 100% de exactitud si una página 
es XHTML válido. Por ejemplo, revise la validación de la página de inicio. 

5. Todas las páginas de este sitio usan marcaje semántico estructural. Se usan etiquetas 
HA2 para los títulos principales, y H3 para los subtítulos. Por ejemplo, en esta página, 
los usuarios de JAWS, pueden saltar a la próxima sección dentro de la declaración 
de accesibilidad presionando ALT+INSERT+3. 
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Ayudas de navegación 


1. Todas las páginas contienen vínculos de tipo rel=previous, next, up, y home 
para ayudar en la navegación en navegadores de texto. Los usuarios Netscape 6 y 
Mozilla también pueden tomar ventaja de esta característica seleccionando el menu 
Ver, Mostrar/ocultar, Barra de Navegación de Sitios, Mostrar Solo Cuando sea 
Necesario (o Mostrar Siempre). 

2. Los consejos tienen referencias cruzadas de diversos tipos. Puede buscar los 
consejos por persona, por discapacidad, por principio de diseño, por tecnología 
asistente, y por herramienta de publicación. 

3. La página de inicio y todas las páginas de archivo incluyen una barra de búsqueda 
(tecla de acceso 4). Opciones de búsqueda avanzadas están disponibles en la página 
de búsqueda avanzada. 


Vínculos 


1. Muchos vínculos tienen atributos de titulo que describen el vínculo en mayor 
detalle, a menos que el texto del vínculo describa a cabalidad el destino (tal como el 
titulo de un artículo). 

2. Los vínculos están escritos de forma que tienen sentido aun fuera de contexto. 


Imágenes 


1. Todas las imágenes de contenido usadas en este sitio incluyen atributos ALT. Los 
gráficos puramente decorativos incluyen atributos ALT nulos. 

2. Las imágenes complejas incluyen atributos LONGDESC o descripciones en línea 
para explicar el significado de cada imagen a los usuarios no videntes. 


Diseño visual 


1. Este sitio usa hojas de estilo en cascada para su disposición visual. 
Este sitio usa tamaños relativos de fuentes, compatible con la opción “Tamaño del 
texto” que posee el usuario en los navegadores visuales. 

3. Si su navegador o dispositivo de navegación no soporta hojas de estilo en cascada, 
en absoluto, el contenido de cada una de las páginas se mantiene legible. 


Referencias de Accesibilidad 


Pautas de accesibilidad de la W3, que explica las razones detrás de cada pauta. 
Técnicas de accesibilidad de la W3, que explica como implementar cada pauta. 
3. Tabla de Puntos de Verificación para las Pautas de Accesibilidad al Contenido en la 
Web 1.0, guía para un diseñador ocupado para la accesibilidad, artículo 
en inglés. 
4. Estándares De Accesibilidad Para La Tecnología Electrónica E Informática Sección 
508 del Gobierno Federal de EU. 





DN 
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Aplicaciones de accesibilidad 


1. 


2. 


JAWS, un lector de pantalla para Windows. Versión temporal, demostración 
descargable disponible. 

Home Page Reader, un lector de pantalla para Windows. Demostración descargable 
disponible. 

Lynx, un navegador de texto gratis para usuarios no videntes con despliegues 
refrescables en Braille. Haz clic aquí para aprender a usarlo. 

Links, un navegador de texto gratis para usuarios visuales con velocidad de 
conexión baja. 

Opera, un navegador visual con muchas características relacionadas con la 
accesibilidad, incluyendo zoom de texto, hojas de estilo de usuario, desactivación de 
imágenes. Compatible con Windows, Macintosh, Linux, y muchos otros sistemas 
operativos. 


Servicios de accesibilidad 


1. 


Bobby, un servicio gratis para analizar páginas de Internet en busca de conformidad 
con pautas de accesibilidad. Una versión comercial completa también esta 
disponible. Sitio en inglés. 

Validador HTML, un servicio gratis para chequear si las páginas de Internet 
cumplen con los estándares HTML publicados. Sitio en inglés. 

Web Page Backward Compatibility Viewer, una herramienta para visualizar sus 
páginas de Internet sin una variedad de características de navegadores modernos. 
Sitio en inglés. 

Lynx Viewer, un servicio gratis para visualizar como se ven sus páginas de Internet 
en Lynx. Sitio en inglés. 


Fuentes relacionadas 


WebAlIM, organización sin fines de lucro dedicada a mejorar la accesibilidad a los 
materiales de aprendizaje en línea. 

Designing More Usable Web Sites, un amplio listado de recursos adicionales, 
artículo en inglés. 





Libros de Accesibilidad que recomiendo 


1. 


Joe Clark: Construyendo Sitios de Internet Accesibles (Building Accessible 
Websites). Fui el editor técnico de este libro; es excelente. Extenso pero no 
abrumador. 

Jim Thatcher y otros: Construyendo Sitios de Internet Accesibles (Constructing 
Accessible Web Sites). No tan extenso como el libro anterior; pero explica mas a 
fondo los tópicos que abarca. Ofrece imágenes de como los diversos lectores de 
pantalla y navegadores alternativos interpretan las diversas etiquetas y el marcaje. 
También contiene un capitulo maravilloso sobre el estado legal actual de los 
requisitos de accesibilidad. 
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Términos de uso 


Este libro es gratis. Puede usar esta información para cualquier propósito, comercial o de 
otro modo, sin costo u obligación de ningún tipo. 


Además, se otorga permiso para copiar, distribuir, y/o modificar este libro bajo los términos 
de la Licencia de Documentación Gratis GNU, Versión 1.1 o cualquier versión subsiguiente 
publicada por la Fundación de Software Gratis (Free Software Foundation); sin Secciones 
Invariables, sin Textos de Cubierta Inicial, y sin Textos de Cobertura Final. Una copia de la 
licencia se incluye debajo. 


Apéndice B. Licencia de Documentación Libre de GNU 
Versión 1.2, Noviembre 2002 


Ésta es una traducción no oficial de la GNU Free Document License a Español 
(Castellano). No ha sido publicada por la Free Software Foundation y no establece 
legalmente los términos de distribución para trabajos que usen la GFDL (sólo el texto de la 
versión original en Inglés de la GFDL lo hace). Sin embargo, esperamos que esta 
traducción ayude los hispanohablantes a entender mejor la GFDL. La versión original de la 
GFDL esta disponible en la Free Software Foundation. 


Esta traducción está basada en una de la versión 1.1 de Igor Támara y Pablo Reyes. Sin 
embargo la responsabilidad de su interpretación es de Joaquín Seoane. 


Copyright (C) 2000, 2001, 2002 Free Software Foundation, Inc. 
59 Temple Place, Suite 330, Boston, MA 
02111-1307 USA 


Se permite la copia y distribución de copias literales de este 
documento de licencia, pero no se permiten cambios. 


B.1. PREÁMBULO 


El propósito de esta Licencia es permitir que un manual, libro de texto, u otro documento 
escrito sea libre en el sentido de libertad: asegurar a todo el mundo la libertad efectiva de 
copiarlo y redistribuirlo, con o sin modificaciones, de manera comercial o no. En segundo 
término, esta Licencia proporciona al autor y al editor una manera de obtener 
reconocimiento por su trabajo, sin que se le considere responsable de las modificaciones 
realizadas por otros. 


Esta Licencia es de tipo copyleft, lo que significa que los trabajos derivados del documento 


deben a su vez ser libres en el mismo sentido. Complementa la Licencia Pública General de 
GNU, que es una licencia tipo copyleft diseñada para el software libre. 
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Hemos diseñado esta Licencia para usarla en manuales de software libre, ya que el software 
libre necesita documentación libre: un programa libre debe venir con manuales que 
ofrezcan la mismas libertades que el software. Pero esta licencia no se limita a manuales de 
software; puede usarse para cualquier texto, sin tener en cuenta su temática o si se publica 
como libro impreso o no. Recomendamos esta licencia principalmente para trabajos cuyo 
fin sea instructivo o de referencia. 


B.2. APLICABILIDAD Y DEFINICIONES 


Esta Licencia se aplica a cualquier manual u otro trabajo, en cualquier soporte, que 
contenga una nota del propietario de los derechos de autor que indique que puede ser 
distribuido bajo los términos de esta Licencia. Tal nota garantiza en cualquier lugar del 
mundo, sin pago de derechos y sin límite de tiempo, el uso de dicho trabajo según las 
condiciones aquí estipuladas. En adelante la palabra Documento se referirá a cualquiera de 
dichos manuales o trabajos. Cualquier persona es un licenciatario y será referido como 
Usted. Usted acepta la licencia si copia. modifica o distribuye el trabajo de cualquier modo 
que requiera permiso según la ley de propiedad intelectual. 


Una Versión Modificada del Documento significa cualquier trabajo que contenga el 
Documento o una porción del mismo, ya sea una copia literal o con modificaciones y/o 
traducciones a otro idioma. 


Una Sección Secundaria es un apéndice con título o una sección preliminar del Documento 
que trata exclusivamente de la relación entre los autores o editores y el tema general del 
Documento (o temas relacionados) pero que no contiene nada que entre directamente en 
dicho tema general (por ejemplo, si el Documento es en parte un texto de matemáticas, una 
Sección Secundaria puede no explicar nada de matemáticas). La relación puede ser una 
conexión histórica con el tema o temas relacionados, o una opinión legal, comercial, 
filosófica, ética o política acerca de ellos. 


Las Secciones Invariantes son ciertas Secciones Secundarias cuyos títulos son designados 
como Secciones Invariantes en la nota que indica que el documento es liberado bajo esta 
Licencia. Si una sección no entra en la definición de Secundaria, no puede designarse como 
Invariante. El documento puede no tener Secciones Invariantes. Si el Documento no 
identifica las Secciones Invariantes, es que no las tiene. 


Los Textos de Cubierta son ciertos pasajes cortos de texto que se listan como Textos de 
Cubierta Delantera o Textos de Cubierta Trasera en la nota que indica que el documento es 
liberado bajo esta Licencia. Un Texto de Cubierta Delantera puede tener como mucho 5 
palabras, y uno de Cubierta Trasera puede tener hasta 25 palabras. 


Una copia Transparente del Documento, significa una copia para lectura en máquina, 
representada en un formato cuya especificación está disponible al público en general, apto 
para que los contenidos puedan ser vistos y editados directamente con editores de texto 
genéricos o (para imágenes compuestas por puntos) con programas genéricos de 
manipulación de imágenes o (para dibujos) con algún editor de dibujos ampliamente 
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disponible, y que sea adecuado como entrada para formateadores de texto o para su 
traducción automática a formatos adecuados para formateadores de texto. Una copia hecha 
en un formato definido como Transparente, pero cuyo marcaje o ausencia de él haya sido 
diseñado para impedir o dificultar modificaciones posteriores por parte de los lectores no es 
Transparente. Un formato de imagen no es Transparente si se usa para una cantidad de 
texto sustancial. Una copia que no es Transparente se denomina Opaca. 


Como ejemplos de formatos adecuados para copias Transparentes están ASCH puro sin 
marcaje, formato de entrada de Texinfo, formato de entrada de LaTeX, SGML o XML 
usando una DTD disponible públicamente, y HTML, PostScript o PDF simples, que sigan 
los estándares y diseñados para que los modifiquen personas. Ejemplos de formatos de 
imagen transparentes son PNG, XCF y JPG. Los formatos Opacos incluyen formatos 
propietarios que pueden ser leídos y editados únicamente en procesadores de palabras 
propietarios, SGML o XML para los cuáles las DTD y/o herramientas de procesamiento no 
estén ampliamente disponibles, y HTML, PostScript o PDF generados por algunos 
procesadores de palabras sólo como salida. 


La Portada significa, en un libro impreso, la página de título, más las páginas siguientes 
que sean necesarias para mantener legiblemente el material que esta Licencia requiere en la 
portada. Para trabajos en formatos que no tienen página de portada como tal, Portada 
significa el texto cercano a la aparición más prominente del título del trabajo, precediendo 
el comienzo del cuerpo del texto. 


Una sección Titulada XYZ significa una parte del Documento cuyo título es precisamente 
XYZ o contiene XYZ entre paréntesis, a continuación de texto que traduce XYZ a otro 
idioma (aquí XYZ se refiere a nombres de sección específicos mencionados más abajo, 
como Agradecimientos, Dedicatorias , Aprobaciones o Historia. Conservar el Título de tal 
sección cuando se modifica el Documento significa que permanece una sección Titulada 
XYZ según esta definición. 


B.3. COPIA LITERAL 


Usted puede copiar y distribuir el Documento en cualquier soporte, sea en forma comercial 
O no, siempre y cuando esta Licencia, las notas de copyright y la nota que indica que esta 
Licencia se aplica al Documento se reproduzcan en todas las copias y que usted no añada 
ninguna otra condición a las expuestas en esta Licencia. Usted no puede usar medidas 
técnicas para obstruir o controlar la lectura o copia posterior de las copias que usted haga o 
distribuya. Sin embargo, usted puede aceptar compensación a cambio de las copias. Si 
distribuye un número suficientemente grande de copias también deberá seguir las 
condiciones de la sección 3. 


Usted también puede prestar copias, bajo las mismas condiciones establecidas 
anteriormente, y puede exhibir copias públicamente. 


Sumérjase en la Accesibilidad 86 


B.4. COPIADO EN CANTIDAD 


Si publica copias impresas del Documento (o copias en soportes que tengan normalmente 
cubiertas impresas) que sobrepasen las 100, y la nota de licencia del Documento exige 
Textos de Cubierta, debe incluir las copias con cubiertas que lleven en forma clara y legible 
todos esos Textos de Cubierta: Textos de Cubierta Delantera en la cubierta delantera y 
Textos de Cubierta Trasera en la cubierta trasera. Ambas cubiertas deben identificarlo a 
Usted clara y legiblemente como editor de tales copias. La cubierta debe mostrar el título 
completo con todas las palabras igualmente prominentes y visibles. Además puede añadir 
otro material en las cubiertas. Las copias con cambios limitados a las cubiertas, siempre que 
conserven el título del Documento y satisfagan estas condiciones, pueden considerarse 
como copias literales. 


Si los textos requeridos para la cubierta son muy voluminosos para que ajusten 
legiblemente, debe colocar los primeros (tantos como sea razonable colocar) en la 
verdadera cubierta y situar el resto en páginas adyacentes. 


Si Usted publica o distribuye copias Opacas del Documento cuya cantidad exceda las 100, 
debe incluir una copia Transparente, que pueda ser leída por una máquina, con cada copia 
Opaca, o bien mostrar, en cada copia Opaca, una dirección de red donde cualquier usuario 
de la misma tenga acceso por medio de protocolos públicos y estandarizados a una copia 
Transparente del Documento completa, sin material adicional. Si usted hace uso de la 
última opción, deberá tomar las medidas necesarias, cuando comience la distribución de las 
copias Opacas en cantidad, para asegurar que esta copia Transparente permanecerá 
accesible en el sitio establecido por lo menos un año después de la última vez que 
distribuya una copia Opaca de esa edición al público (directamente o a través de sus 
agentes o distribuidores). 


Se solicita, aunque no es requisito, que se ponga en contacto con los autores del Documento 
antes de redistribuir gran número de copias, para darles la oportunidad de que le 
proporcionen una versión actualizada del Documento. 


B.5. MODIFICACIONES 


Puede copiar y distribuir una Versión Modificada del Documento bajo las condiciones de 
las secciones 2 y 3 anteriores, siempre que usted libere la Versión Modificada bajo esta 
misma Licencia, con la Versión Modificada haciendo el rol del Documento, por lo tanto 
dando licencia de distribución y modificación de la Versión Modificada a quienquiera 
posea una copia de la misma. Además, debe hacer lo siguiente en la Versión Modificada: 


e A. Usar en la Portada (y en las cubiertas, si hay alguna) un título distinto al del 
Documento y de sus versiones anteriores (que deberían, si hay alguna, estar listadas 
en la sección de Historia del Documento). Puede usar el mismo título de versiones 
anteriores al original siempre y cuando quien las publicó originalmente otorgue 
permiso. 
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e B. Listar en la Portada, como autores, una o más personas o entidades responsables 
de la autoría de las modificaciones de la Versión Modificada, junto con por lo 
menos cinco de los autores principales del Documento (todos sus autores 
principales, si hay menos de cinco), a menos que le eximan de tal requisito. 

e C. Mostrar en la Portada como editor el nombre del editor de la Versión 
Modificada. 

e D. Conservar todas las notas de copyright del Documento. 

e E. Añadir una nota de copyright apropiada a sus modificaciones, adyacente a las 
otras notas de copyright. 

e F. Incluir, inmediatamente después de las notas de copyright, una nota de licencia 
dando el permiso para usar la Versión Modificada bajo los términos de esta 
Licencia, como se muestra en la Adenda al final de este documento. 

e G. Conservar en esa nota de licencia el listado completo de las Secciones 
Invariantes y de los Textos de Cubierta que sean requeridos en la nota de Licencia 
del Documento original. 

e H. Incluir una copia sin modificación de esta Licencia. 

e I. Conservar la sección Titulada Historia, conservar su Título y añadirle un 
elemento que declare al menos el título, el año, los nuevos autores y el editor de la 
Versión Modificada, tal como figuran en la Portada. Si no hay una sección Titulada 
Historia en el Documento, crear una estableciendo el título, el año, los autores y el 
editor del Documento, tal como figuran en su Portada, añadiendo además un 
elemento describiendo la Versión Modificada, como se estableció en la oración 
anterior. 

e J. Conservar la dirección en red, si la hay, dada en el Documento para el acceso 
público a una copia Transparente del mismo, así como las otras direcciones de red 
dadas en el Documento para versiones anteriores en las que estuviese basado. 
Pueden ubicarse en la sección Historia. Se puede omitir la ubicación en red de un 
trabajo que haya sido publicado por lo menos cuatro años antes que el Documento 
mismo, o si el editor original de dicha versión da permiso. 

e K. En cualquier sección Titulada Agradecimientos o Dedicatorias, Conservar el 
Título de la sección y conservar en ella toda la sustancia y el tono de los 
agradecimientos y/o dedicatorias incluidas por cada contribuyente. 

e L. Conservar todas las Secciones Invariantes del Documento, sin alterar su texto ni 
sus títulos. Números de sección o el equivalente no son considerados parte de los 
títulos de la sección. 

e M. Borrar cualquier sección titulada Aprobaciones. Tales secciones no pueden estar 
incluidas en las Versiones Modificadas. 

e N. No cambiar el título de ninguna sección existente a Aprobaciones ni a uno que 
entre en conflicto con el de alguna Sección Invariante. 

e O. Conservar todas las Limitaciones de Garantía. 


Si la Versión Modificada incluye secciones O apéndices nuevos que califiquen como 
Secciones Secundarias y contienen material no copiado del Documento, puede 
opcionalmente designar algunas o todas esas secciones como invariantes. Para hacerlo, 
añada sus títulos a la lista de Secciones Invariantes en la nota de licencia de la Versión 
Modificada. Tales títulos deben ser distintos de cualquier otro título de sección. 
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Puede añadir una sección titulada Aprobaciones, siempre que contenga únicamente 
aprobaciones de su Versión Modificada por otras fuentes --por ejemplo, observaciones de 
peritos o que el texto ha sido aprobado por una organización como la definición oficial de 
un estándar. 


Puede añadir un pasaje de hasta cinco palabras como Texto de Cubierta Delantera y un 
pasaje de hasta 25 palabras como Texto de Cubierta Trasera en la Versión Modificada. Una 
entidad solo puede añadir (o hacer que se añada) un pasaje al Texto de Cubierta Delantera y 
uno al de Cubierta Trasera. Si el Documento ya incluye un textos de cubiertas añadidos 
previamente por usted o por la misma entidad que usted representa, usted no puede añadir 
otro; pero puede reemplazar el anterior, con permiso explícito del editor que agregó el texto 
anterior. 


Con esta Licencia ni los autores ni los editores del Documento dan permiso para usar sus 
nombres para publicidad ni para asegurar o implicar aprobación de cualquier Versión 
Modificada. 


B.6. COMBINACIÓN DE DOCUMENTOS 


Usted puede combinar el Documento con otros documentos liberados bajo esta Licencia, 
bajo los términos definidos en la sección 4 anterior para versiones modificadas, siempre 
que incluya en la combinación todas las Secciones Invariantes de todos los documentos 
originales, sin modificar, listadas todas como Secciones Invariantes del trabajo combinado 
en su nota de licencia. Así mismo debe incluir la Limitación de Garantía. 


El trabajo combinado necesita contener solamente una copia de esta Licencia, y puede 
reemplazar varias Secciones Invariantes idénticas por una sola copia. Si hay varias 
Secciones Invariantes con el mismo nombre pero con contenidos diferentes, haga el título 
de cada una de estas secciones único añadiéndole al final del mismo, entre paréntesis, el 
nombre del autor o editor original de esa sección, si es conocido, o si no, un número único. 
Haga el mismo ajuste a los títulos de sección en la lista de Secciones Invariantes de la nota 
de licencia del trabajo combinado. 


En la combinación, debe combinar cualquier sección Titulada Historia de los documentos 
originales, formando una sección Titulada Historia; de la misma forma combine cualquier 
sección Titulada Agradecimientos, y cualquier sección Titulada Dedicatorias. Debe borrar 
todas las secciones tituladas Aprobaciones. 


B.7. COLECCIONES DE DOCUMENTOS 


Puede hacer una colección que conste del Documento y de otros documentos liberados bajo 
esta Licencia, y reemplazar las copias individuales de esta Licencia en todos los 
documentos por una sola copia que esté incluida en la colección, siempre que siga las reglas 
de esta Licencia para cada copia literal de cada uno de los documentos en cualquiera de los 
demás aspectos. 
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Puede extraer un solo documento de una de tales colecciones y distribuirlo individualmente 
bajo esta Licencia, siempre que inserte una copia de esta Licencia en el documento 
extraído, y siga esta Licencia en todos los demás aspectos relativos a la copia literal de 
dicho documento. 


B.8. AGREGACIÓN CON TRABAJOS INDEPENDIENTES 


Una recopilación que conste del Documento o sus derivados y de otros documentos o 
trabajos separados e independientes, en cualquier soporte de almacenamiento o 
distribución, se denomina un agregado si el copyright resultante de la compilación no se 
usa para limitar los derechos de los usuarios de la misma más allá de lo que los de los 
trabajos individuales permiten. Cuando el Documento se incluye en un agregado, esta 
Licencia no se aplica a otros trabajos del agregado que no sean en sí mismos derivados del 
Documento. 


Si el requisito de la sección 3 sobre el Texto de Cubierta es aplicable a estas copias del 
Documento y el Documento es menor que la mitad del agregado entero, los Textos de 
Cubierta del Documento pueden colocarse en cubiertas que enmarquen solamente el 
Documento dentro del agregado, o el equivalente electrónico de las cubiertas si el 
documento está en forma electrónica. En caso contrario deben aparecer en cubiertas 
impresas enmarcando todo el agregado. 


B.9. TRADUCCIÓN 


La Traducción es considerada como un tipo de modificación, por lo que usted puede 
distribuir traducciones del Documento bajo los términos de la sección 4. El reemplazo las 
Secciones Invariantes con traducciones requiere permiso especial de los dueños de derecho 
de autor, pero usted puede añadir traducciones de algunas o todas las Secciones Invariantes 
a las versiones originales de las mismas. Puede incluir una traducción de esta Licencia, de 
todas las notas de licencia del documento, así como de las Limitaciones de Garantía, 
siempre que incluya también la versión en Inglés de esta Licencia y las versiones originales 
de las notas de licencia y Limitaciones de Garantía. En caso de desacuerdo entre la 
traducción y la versión original en Inglés de esta Licencia, la nota de licencia o la 
limitación de garantía, la versión original en Inglés prevalecerá. 


Si una sección del Documento está Titulada Agradecimientos, Dedicatorias o Historia el 
requisito (sección 4) de Conservar su Título (Sección 1) requerirá, típicamente, cambiar su 
título. 


B.10. TERMINACIÓN 


Usted no puede copiar, modificar, sublicenciar o distribuir el Documento salvo por lo 
permitido expresamente por esta Licencia. Cualquier otro intento de copia, modificación, 
sublicenciamiento o distribución del Documento es nulo, y dará por terminados 
automáticamente sus derechos bajo esa Licencia. Sin embargo, los terceros que hayan 
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recibido copias, o derechos, de usted bajo esta Licencia no verán terminadas sus licencias, 
siempre que permanezcan en total conformidad con ella. 


B.11. REVISIONES FUTURAS DE ESTA LICENCIA 


De vez en cuando la Free Software Foundation puede publicar versiones nuevas y revisadas 
de la Licencia de Documentación Libre GNU. Tales versiones nuevas serán similares en 
espíritu a la presente versión, pero pueden diferir en detalles para solucionar nuevos 
problemas o intereses. Vea http://www.gnu.org/copyleft/. 


Cada versión de la Licencia tiene un número de versión que la distingue. Si el Documento 
especifica que se aplica una versión numerada en particular de esta licencia o cualquier 
versión posterior, usted tiene la opción de seguir los términos y condiciones de la versión 
especificada o cualquiera posterior que haya sido publicada (no como borrador) por la Free 
Software Foundation. Si el Documento no especifica un número de versión de esta 
Licencia, puede escoger cualquier versión que haya sido publicada (no como borrador) por 
la Free Software Foundation. 


B.12. ADENDA: Cómo usar esta Licencia en sus documentos 


Para usar esta licencia en un documento que usted haya escrito, incluya una copia de la 
Licencia en el documento y ponga el siguiente copyright y nota de licencia justo después de 
la página de título: 

Copyright (c) AÑO SU NOMBRE. Se concede permiso para copiar, distribuir 
y/o modificar este documento bajo los términos de la Licencia de 
Documentación Libre de GNU, Versión 1.2 o cualquier otra versión 
posterior publicada por la Free Software Foundation; sin Secciones 
Invariantes ni Textos de Cubierta Delantera ni Textos de Cubierta 
Trasera. Una copia de la licencia está incluida en la sección titulada 
GNU Free Documentation License. 





Si tiene Secciones Invariantes, Textos de Cubierta Delantera y Textos de Cubierta Trasera, 
reemplace la frase sin ... Trasera por esto: siendo las Secciones Invariantes LISTE SUS 
TÍTULOS, siendo los Textos de Cubierta Delantera LISTAR, y siendo sus Textos de 
Cubierta Trasera LISTAR. 


Si tiene Secciones Invariantes sin Textos de Cubierta o cualquier otra combinación de los 
tres, mezcle ambas alternativas para adaptarse a la situación. 


Si su documento contiene ejemplos de código de programa no triviales, recomendamos 
liberar estos ejemplos en paralelo bajo la licencia de software libre que usted elija, como la 
Licencia Pública General de GNU (GNU General Public License), para permitir su uso en 
software libre. 
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Notas sobre la traducción 


Esta traducción al español de “Dive into Accessibility: 30 to a more accessible web site” de 
Mark Pilgrim se completó el 18 de noviembre del 2005. 


Algunos detalles relativos a la traducción: 


= Aunque la mayoría de los vínculos relativos a artículos o sitios externos (sección 
lectura añadida) están en idioma inglés, en algunos casos fueron hallados archivos 
en idioma español y se hace referencia a estos en esta traducción cuando no se hace 
ninguna indicación relativa al idioma del documento. Por lo tal, se debe entender 
que los artículos o sitios que no contengan “en inglés” en sus descripciones están en 
idioma español. 

= Cabe destacar que algunos vínculos a artículos o sitios ya no están en Internet, 
debido a que ya hace 3 años que este libro fue publicado originalmente. 

=  Enlos casos en que la existencia de una página en español se haya encontrado para 
las herramientas de publicación mencionadas en este libro, se han sustituido las 
referencias en inglés por nuevas vínculos en idioma español. 

= Aunque se han tratado de minimizar al máximo los errores de traducción, se podrían 
presentar casos en que la traducción resulte ambigua o no entendible debido a 
algunas situaciones específicas. Pedimos excusas por anticipado, y esperamos 
escuchar sus comentarios con el fin de mejorar la efectividad y el alcance de la 
traducción. 


De esta forma se completa la traducción completa al español de “Dive into Accessibility”, 


esperamos que le haya sido de utilidad y le que haya ofrecido una visión de la importante 
tarea de la accesibilidad en el desarrollo de una Internet con beneficios para todo el mundo. 
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